经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
HTML+CSS实现导航条下拉菜单的示例代码_HTML/Xhtml
来源:jb51  时间:2021/8/4 9:11:09  对本文有异议

效果

代码中的图片可以自己换的

在这里插入图片描述

下拉菜单HTML代码

  1. <header class="header">
  2. <div class="header_left">
  3. <img src="img/logo.jpg">
  4. </div>
  5. <div class="header_right">
  6. <div class="number_right">
  7. <img src="img/number.jpg">
  8. </div>
  9. <ul>
  10. <a href="#"><li>首页</li></a>
  11. <a href="#"><li class="show_list">
  12. <span>成功案例</span>
  13. <ul class="move_list">
  14. <li>品牌设计</li>
  15. <li>网页设计</li>
  16. <li>平面设计</li>
  17. <li>电子商城</li>
  18. <li>空间/建筑</li>
  19. </ul>
  20. </li></a>
  21. <a href="#"><li>我要设计</li></a>
  22. <a href="#"><li>在线咨询</li></a>
  23. <a href="#"><li>会员注册</li></a>
  24. <a href="#"><li>会员登录</li></a>
  25. </ul>
  26. </div>
  27. </header>

下拉菜单CSS代码

  1. .header{
  2. height: 120px;
  3. width: 1046px;
  4. margin: 0 auto;
  5. }
  6. .header_left{
  7. float: left;
  8. line-height: 120px;
  9.  
  10. }
  11. .header_left img{
  12. width: 300px;
  13. height: 100px;
  14. }
  15. .header_right{
  16. float: right;
  17. height: 120px;
  18. position: relative;
  19. }
  20. .header_right>div{
  21. position: absolute;
  22. top: 0;
  23. right: 0;
  24.  
  25. }
  26. .header_right ul{
  27. margin-top: 88px;
  28.  
  29. }
  30. .header_right ul a li{
  31. border-right: 1px solid #000000;
  32. height: 13px;
  33. font-size: 15px;
  34. padding: 0 25px;
  35. font-weight: bold;
  36. color: #666;
  37.  
  38. }
  39. .header_right ul a{
  40. float: left;
  41. line-height: 13px;
  42.  
  43. }
  44. .header_right ul a li:hover{
  45. color: #000000;
  46. }
  47. .header_right ul a:last-child li{/*去掉最后的边框*/
  48. border: none;
  49. }
  50. .show_list{
  51. position: relative;
  52. }
  53. .show_list .move_list{
  54. display: none;
  55. z-index: 103;
  56. position: absolute;
  57. top: -56px;
  58. left: 0;
  59. width: 100%;
  60. background: #333;
  61. text-align: center;
  62. }
  63. .show_list .move_list li{
  64. padding: 10px 0;
  65. width: 114px;
  66. color: #fff;
  67. }
  68. .header_right ul a .show_list{
  69. padding-bottom: 20px;
  70. border-right: none;
  71. }
  72. .show_list:hover .move_list{
  73. display: block;
  74. }
  75. .header_right ul a:nth-child(3){
  76. border-left: 1px solid #000;
  77. }
  78. .show_list .move_list li:hover{
  79. color: white;
  80. background: orange;
  81. }

在写完上述代码的同时须加上css的重置代码,代码如下:

  1. * {
  2. margin: 0;
  3. padding: 0
  4. }
  5. em,i {
  6. font-style: normal
  7. }
  8. li {
  9. list-style: none
  10. }
  11. a{
  12. font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;
  13. letter-spacing: 1.2px;
  14. color: #666;
  15. text-decoration: none
  16. }
  17. a:hover {
  18. color: #c81623 ;
  19. }
  20.  
  21. img {
  22. border: 0;
  23. vertical-align: middle
  24. }
  25. input{
  26. outline: none;
  27. }
  28. button {
  29. cursor: pointer;
  30. border:none;
  31. outline: none;
  32. }

到此这篇关于HTML+CSS实现导航条下拉菜单的示例代码的文章就介绍到这了,更多相关HTML+CSS导航条下拉菜单内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号