div+css下拉菜单导航条 - 电脑 - 【南平电脑网】_南平电脑维修_南平笔记本电脑维修_监控安装_市区上门维修
公司动态

div+css下拉菜单导航条

摘要：文章目录索引(?) [-] 文章简介 css代码 html代码 div+css下拉菜单导航条效果图文章简介有空时研究别的，偶尔写次也没记，正好有个客户导航需要换成下拉菜单形式的...

发布日期：2018-04-25

文章目录索引(?) [-]

    文章简介 css代码 html代码 div+css下拉菜单导航条效果图

文章简介

有空时研究别的，偶尔写次也没记，正好有个客户导航需要换成下拉菜单形式的，就想起用div+css写了，本文就把这写好的div+css代码共享一下，希望看到这方面的网友有点帮助。

css代码
  1. *{padding:0;margin:0;}body{font-family:tahoma;font:12pxVerdana,Arial,Tahoma;}
  2. table,td,tr,th{font-size:12px;}ol,ul,li{list-style:none;}
  3. img{vertical-align:top;border:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal;}
  4. address,cite,code,em,th,i{font-weight:normal;font-style:normal;}table{border-collapse:collapse;border-spacing:0;}
  5. /*HTML5display-roleresetforolderbrowsers*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
  6. blockquote,q{quotes:none;}blockquote:before,blockquote:after,
  7. q:before,q:after{content:"";content:none;}a:link,a:visited{text-decoration:none;}
  8. a:hover{text-decoration:underline;color:#FF6600;}
  9. .nav{width:100%;height:53px;margin:0auto;background:url(http://www.pc811.com/demo/392.gif)repeat-xscroll00transparent;}.navul{position:relative;height:53px;width:1000px;margin:0pxauto;}
  10. .navulli{float:left;width:120px;line-height:43px;list-style-type:none;margin-top:10px;text-align:center;}.navullia{float:left;width:100%;height:100%;color:#FFFFFF;text-decoration:none;font-size:14px;text-align:center;}
  11. .navulli.li0:hover{background:#FF3939;}.navulli.li1:hover{background:#2CB9C4;}
  12. .navulli.li2:hover{background:#39A9FF;}.navulli.li3:hover{background:#8839FF;}
  13. .navulli.li4:hover{background:#FC5189;}.navulli.li5:hover{background:#82B434;}
  14. .navulli.li6:hover{background:#FF9B1A;}.navulli.li7:hover{background:#FF3939;}
  15. .navullidiv{display:none;z-index:10}
  16. .navulli:hoverdiv{display:block;position:absolute;left:0;top:53px;width:990px;background:url(http://www.pc811.com/demo/1-03.png)repeat-x;}.navulli:hoverdl{float:left;padding:10px000;border-left:1pxsolid#EDEBE9;width:125px;height:185px;border-top:none;border-bottom:none;line-height:22px;}
  17. .navulli:hoverdldt{color:#88766E;background:url(http://www.pc811.com/demo/sk.gif)no-repeatscroll05pxtransparent;text-align:left;padding-left:30px;}.navulli:hoverdldd{text-align:left;padding-left:30px;}
  18. .navulli:hoverdldda{float:none;text-decoration:none;font-size:12px;text-align:center;color:#747474;}.navulli:hoverdldda:hover{text-decoration:none;color:red;}
  19. .navulli:hover.nav2dl{width:120px;}
  20. .navulli:hover.nav3dl{width:135px;}.navulli:hover.nav4dl{width:150px;}
  21. .navulli:hover.nav5dl{width:145px;}.navulli:hover.nav7dl{width:175px;}
  22. .navul.li1:hoverdl.nav_1of2{width:340px;height:155px;padding:40px10px010px;}.navul.li1:hoverdl.nav_1of4{width:359px;padding:10px5px010px;border-right:1pxsolid#EDEBE9;}
  23. .navul.li2:hoverdl.nav_2of6{float:right;width:365px;border-right:1pxsolid#EDEBE9;}.navul.li3:hoverdl.nav_3of5{float:right;width:440px;border-right:1pxsolid#EDEBE9;}
  24. .navul.li4:hoverdl.nav_4of3{float:right;width:680px;border-right:1pxsolid#EDEBE9;}.navul.li5:hoverdl.nav_5of5{float:right;width:400px;;border-right:1pxsolid#EDEBE9;}
  25. .navul.li6:hoverdl.nav_6of6{float:right;width:355px;;border-right:1pxsolid#EDEBE9;}.navul.li7:hoverdl.nav_7of2{float:right;width:805px;;border-right:1pxsolid#EDEBE9;}
  26. .navulli:hover.nav2dt{background:url(http://www.pc811.com/demo/wg-sk.gif)no-repeatscroll07pxtransparent;}
  27. .navulli:hover.nav3dt{background:url(http://www.pc811.com/demo/js-sk.gif)no-repeatscroll07pxtransparent;}.navulli:hover.nav4dt{background:url(http://www.pc811.com/demo/fx-sk.gif)no-repeatscroll07pxtransparent;}
  28. .navulli:hover.nav5dt{background:url(http://www.pc811.com/demo/xt-sk.gif)no-repeatscroll07pxtransparent;}.navulli:hover.nav6dt{background:url(http://www.pc811.com/demo/xf-sk.gif)no-repeatscroll07pxtransparent;}
  29. .navulli:hover.nav7dt{background:url(http://www.pc811.com/demo/mf-sk.gif)no-repeatscroll07pxtransparent;}
  30. .navulli:hoverdiva{width:auto!important;height:auto!important;}.navul.li1:hoverdl.nav_1of4a,.navul.li2:hoverdl.nav_2of6a,.navul.li3:hoverdl.nav_3of5a,.navul.li4:hoverdl.nav_4of3a,.navul.li5:hoverdl.nav_5of5a,.navul.li6:hoverdl.nav_6of6a,.navul.li7:hoverdl.nav_7of2a{float:right;text-align:right;margin-right:10px;}

html代码
  1. <divclass="nav"><ul>
  2. <liclass="li0"><ahref="http://www.pc811.com/">美雅枫首页</a></li><liclass="li1"><ahref="http://www.pc811.com/">品牌文化中心</a>
  3. <divclass="nav1"><dlclass="nav_1of1">
  4. <dt>了解美雅枫</dt><dd><ahref="http://www.pc811.com/">美雅枫简介</a></dd>
  5. <dd><ahref="http://www.pc811.com/">最新动态</a></dd><dd><ahref="http://www.pc811.com/">权威专家</a></dd>
  6. <dd><ahref="http://www.pc811.com/">品牌理念</a></dd><dd><ahref="http://www.pc811.com/">顶尖设备</a></dd>
  7. <dd><ahref="http://www.pc811.com/">星级环境</a></dd><dd><ahref="http://www.pc811.com/">安全体系</a></dd>
  8. </dl><dlclass="nav_1of2">
  9. <ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/zj.jpg"/></a></dl>
  10. <dlclass="nav_1of3"><dt>服务支持</dt>
  11. <dd><ahref="http://www.pc811.com/">服务指南</a></dd><dd><ahref="http://www.pc811.com/">五心服务</a></dd>
  12. <dd><ahref="http://www.pc811.com/">咨询预约</a></dd><dd><ahref="http://www.pc811.com/">联系我们</a></dd>
  13. <dd><ahref="http://www.pc811.com/">乘车咨询</a></dd></dl>
  14. <dlclass="nav_1of4"><ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/pp.jpg"/></a>
  15. </dl></div>
  16. </li><liclass="li2"><ahref="http://www.pc811.com/">面部塑形中心</a>
  17. <divclass="nav2"><dlclass="nav_2of1">
  18. <dt>眼部塑形</dt><dd><ahref="http://www.pc811.com/">微雕开眼角</a></dd>
  19. <dd><ahref="http://www.pc811.com/">祛眼袋</a></dd><dd><ahref="http://www.pc811.com/">上睑下垂</a></dd>
  20. <dd><ahref="http://www.pc811.com/">眼角提升</a></dd><dd><ahref="http://www.pc811.com/">眼部整形修复</a></dd>
  21. </dl><dlclass="nav_2of2">
  22. <dt>鼻部塑形</dt><dd><ahref="http://www.pc811.com/">综合鼻整形</a></dd>
  23. <dd><ahref="http://www.pc811.com/">驼峰鼻矫正</a></dd><dd><ahref="http://www.pc811.com/">隆鼻尖</a></dd>
  24. <dd><ahref="http://www.pc811.com/">鼻头缩小术</a></dd><dd><ahref="http://www.pc811.com/">鼻梁缩小术</a></dd>
  25. <dd><ahref="http://www.pc811.com/">歪鼻斜鼻矫正</a></dd><dd><ahref="http://www.pc811.com/">鼻整形修复</a></dd>
  26. </dl><dlclass="nav_2of3">
  27. <dt>脸廓塑形</dt><dd><ahref="http://www.pc811.com/">自体脂肪丰面</a></dd>
  28. <dd><ahref="http://www.pc811.com/">丰面颊</a></dd><dd><ahref="http://www.pc811.com/">下巴塑形</a></dd>
  29. <dd><ahref="http://www.pc811.com/">额头塑形</a></dd><dd><ahref="http://www.pc811.com/">丰太阳穴</a></dd>
  30. <dd><ahref="http://www.pc811.com/">面部吸脂</a></dd></dl>
  31. <dlclass="nav_2of4"><dt>唇部塑形</dt>
  32. <dd><ahref="http://www.pc811.com/">动感水润丰唇</a></dd><dd><ahref="http://www.pc811.com/">人中加深术</a></dd>
  33. <dd><ahref="http://www.pc811.com/">唇外翻矫正</a></dd><dd><ahref="http://www.pc811.com/">唇珠成型术</a></dd>
  34. <dd><ahref="http://www.pc811.com/">厚唇修薄术</a></dd><dd><ahref="http://www.pc811.com/">口角成型术</a></dd>
  35. </dl><dlclass="nav_2of5">
  36. <dt>特色项目</dt><dd><ahref="http://www.pc811.com/">微雕无痕双眼皮</a></dd>
  37. <dd><ahref="http://www.pc811.com/">自体脂肪丰面</a></dd><dd><ahref="http://www.pc811.com/">综合鼻整形</a></dd>
  38. <dd><ahref="http://www.pc811.com/">可视化阶梯除皱</a></dd></dl>
  39. <dlclass="nav_2of6"><ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/wg-pp.jpg"/></a>
  40. </dl></div>
  41. </li><liclass="li3"><ahref="http://www.pc811.com/">面部年轻化中心</a>
  42. <divclass="nav3"><dlclass="nav_3of1">
  43. <dt>年轻化塑性</dt><dd><ahref="http://www.pc811.com/">自体脂肪丰面</a></dd>
  44. <dd><ahref="http://www.pc811.com/">注射丰额头</a></dd><dd><ahref="http://www.pc811.com/">注射丰太阳穴</a></dd>
  45. <dd><ahref="http://www.pc811.com/">注射丰面颊</a></dd><dd><ahref="http://www.pc811.com/">注射丰下巴</a></dd>
  46. </dl><dlclass="nav_3of2">
  47. <dt>年轻化除皱</dt><dd><ahref="http://www.pc811.com/">内窥镜除皱</a></dd>
  48. <dd><ahref="http://www.pc811.com/">中面部除皱</a></dd><dd><ahref="http://www.pc811.com/">抬头纹</a></dd>
  49. <dd><ahref="http://www.pc811.com/">川字纹</a></dd><dd><ahref="http://www.pc811.com/">鱼尾纹</a></dd>
  50. <dd><ahref="http://www.pc811.com/">法令纹</a></dd><dd><ahref="http://www.pc811.com/">颈部纹</a></dd>
  51. </dl><dlclass="nav_3of3">
  52. <dt>抗衰老技术</dt><dd><ahref="http://www.pc811.com/">瑞蓝美颜术</a></dd>
  53. <dd><ahref="http://www.pc811.com/">BOTOX保妥适</a></dd><dd><ahref="http://www.pc811.com/">双美胶原蛋白</a></dd>
  54. </dl><dlclass="nav_3of4">
  55. <dt>年轻化定制</dt><dd><ahref="http://www.pc811.com/">眼部年轻化</a></dd>
  56. <dd><ahref="http://www.pc811.com/">鼻部年轻化</a></dd><dd><ahref="http://www.pc811.com/">唇部年轻化</a></dd>
  57. <dd><ahref="http://www.pc811.com/">额部年轻化</a></dd><dd><ahref="http://www.pc811.com/">颞部年轻化</a></dd>
  58. <dd><ahref="http://www.pc811.com/">颧部年轻化</a></dd><dd><ahref="http://www.pc811.com/">面部年轻化</a></dd>
  59. </dl><dlclass="nav_3of5">
  60. <ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/js-pp.jpg"/></a></dl>
  61. </div></li>
  62. <liclass="li4"><ahref="http://www.pc811.com/">美胸定制中心</a><divclass="nav4">
  63. <dlclass="nav_4of1"><dt>美胸定制</dt>
  64. <dd><ahref="http://www.pc811.com/">自体脂肪丰胸</a></dd><dd><ahref="http://www.pc811.com/">内窥镜假体隆胸</a></dd>
  65. <dd><ahref="http://www.pc811.com/">乳房下垂矫正</a></dd><dd><ahref="http://www.pc811.com/">乳头乳晕整形</a></dd>
  66. <dd><ahref="http://www.pc811.com/">副乳切除术</a></dd><dd><ahref="http://www.pc811.com/">隆胸整形失败修复</a></dd>
  67. </dl><dlclass="nav_4of2">
  68. <dt>特色项目</dt><dd><ahref="http://www.pc811.com/">自体脂肪丰胸</a></dd>
  69. <dd><ahref="http://www.pc811.com/">内窥镜假体隆胸</a></dd><dd><ahref="http://www.pc811.com/">隆胸整形失败修复</a></dd>
  70. </dl><dlclass="nav_4of3">
  71. <ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/fx-pp.jpg"/></a></dl>
  72. </div></li>
  73. <liclass="li5"><ahref="http://www.pc811.com/">美体塑形中心</a><divclass="nav5">
  74. <dlclass="nav_5of1"><dt>吸脂减肥</dt>
  75. <dd><ahref="http://www.pc811.com/">水动力吸脂</a></dd><dd><ahref="http://www.pc811.com/">产后塑形</a></dd>
  76. <dd><ahref="http://www.pc811.com/">手臂吸脂</a></dd><dd><ahref="http://www.pc811.com/">腰腹吸脂</a></dd>
  77. <dd><ahref="http://www.pc811.com/">臀部吸脂</a></dd><dd><ahref="http://www.pc811.com/">大腿吸脂</a></dd>
  78. <dd><ahref="http://www.pc811.com/">吸脂修复</a></dd></dl>
  79. <dlclass="nav_5of2"><dt>注射减肥溶脂</dt>
  80. <dd><ahref="http://www.pc811.com/">廋脸针</a></dd><dd><ahref="http://www.pc811.com/">瘦小腿</a></dd>
  81. </dl><dlclass="nav_5of3">
  82. <dt>美体塑形</dt><dd><ahref="http://www.pc811.com/">自体脂肪丰面</a></dd>
  83. <dd><ahref="http://www.pc811.com/">自体脂肪丰胸</a></dd><dd><ahref="http://www.pc811.com/">自体脂肪丰臀</a></dd>
  84. </dl><dlclass="nav_5of4">
  85. <dt>美体定制</dt><dd><ahref="http://www.pc811.com/">美体定制</a></dd>
  86. </dl><dlclass="nav_5of5">
  87. <ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/xt-pp.jpg"/></a></dl>
  88. </div></li>
  89. <liclass="li6"><ahref="http://www.pc811.com/">美肤维养中心</a><divclass="nav6">
  90. <dlclass="nav_6of1"><dt>永久脱毛</dt>
  91. <dd><ahref="http://www.pc811.com/">冰点无痛脱毛</a></dd><dd><ahref="http://www.pc811.com/">唇部脱毛</a></dd>
  92. <dd><ahref="http://www.pc811.com/">络腮胡</a></dd><dd><ahref="http://www.pc811.com/">脱腋毛</a></dd>
  93. <dd><ahref="http://www.pc811.com/">手臂脱毛</a></dd><dd><ahref="http://www.pc811.com/">腿部脱毛</a></dd>
  94. <dd><ahref="http://www.pc811.com/">爱心脱毛</a></dd></dl>
  95. <dlclass="nav_6of2"><dt>美肤去斑</dt>
  96. <dd><ahref="http://www.pc811.com/">老年斑</a></dd><dd><ahref="http://www.pc811.com/">咖啡斑</a></dd>
  97. <dd><ahref="http://www.pc811.com/">黄褐斑</a></dd><dd><ahref="http://www.pc811.com/">雀斑</a></dd>
  98. </dl><dlclass="nav_6of3">
  99. <dt>去痘去痣</dt><dd><ahref="http://www.pc811.com/">鲜红斑痣</a></dd>
  100. <dd><ahref="http://www.pc811.com/">雀斑样痣</a></dd><dd><ahref="http://www.pc811.com/">褐青色痣</a></dd>
  101. <dd><ahref="http://www.pc811.com/">太田痣</a></dd><dd><ahref="http://www.pc811.com/">痘印痘疤</a></dd>
  102. <dd><ahref="http://www.pc811.com/">红血丝</a></dd><dd><ahref="http://www.pc811.com/">痤疮</a></dd>
  103. </dl><dlclass="nav_6of4">
  104. <dt>嫩肤美白</dt><dd><ahref="http://www.pc811.com/">皮肤粗糙</a></dd>
  105. <dd><ahref="http://www.pc811.com/">毛孔粗大</a></dd><dd><ahref="http://www.pc811.com/">皮肤油腻</a></dd>
  106. <dd><ahref="http://www.pc811.com/">皮肤暗黄</a></dd><dd><ahref="http://www.pc811.com/">肤色不均</a></dd>
  107. </dl><dlclass="nav_6of5">
  108. <dt>艺术纹绣</dt><dd><ahref="http://www.pc811.com/">乳晕漂红</a></dd>
  109. <dd><ahref="http://www.pc811.com/">花蜜沁唇</a></dd><dd><ahref="http://www.pc811.com/">动感飘眉</a></dd>
  110. <dd><ahref="http://www.pc811.com/">开运飘眉</a></dd><dd><ahref="http://www.pc811.com/">洗唇线</a></dd>
  111. <dd><ahref="http://www.pc811.com/">洗眼线</a></dd><dd><ahref="http://www.pc811.com/">洗纹身</a></dd>
  112. </dl><dlclass="nav_6of6">
  113. <ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/xf-pp.jpg"/></a></dl>
  114. </div></li>
  115. <liclass="li7"><ahref="http://www.pc811.com/">美容修复中心</a><divclass="nav7">
  116. <dlclass="nav_7of1"><dt>整形失败修复</dt>
  117. <dd><ahref="http://www.pc811.com/">眼部整形失败修复</a></dd><dd><ahref="http://www.pc811.com/">鼻部整形失败修复</a></dd>
  118. <dd><ahref="http://www.pc811.com/">隆胸整形失败修复</a></dd><dd><ahref="http://www.pc811.com/">吸脂失败修复</a></dd>
  119. </dl><dlclass="nav_7of2">
  120. <ahref="http://www.pc811.com/"><imgsrc="http://www.meiyafeng.com/templets/myf/images/images/mf-pp.jpg"/></a></dl>
  121. </div></li>
  122. </ul></div>

div+css下拉菜单导航条效果图

演示地址

效果图