打造最美CSS多级下拉横向导航菜单代码

互联网
已经是深秋了，森林里那一望无际的林木都已光秃，让褐色的苔掩住它身上的皱纹。无情的秋天剥下了它们美丽的衣裳，它们只好枯秃地站在那里。

本文实例为大家分享了纯CSS实现多级下拉横向导航菜单代码，供大家参考，具体内容如下

先看看效果图：

实现代码：

CSS代码：

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. /*forthisdemoonly*/
  3. #backgroundHolder{width:750px;height:500px;padding-top:10px;margin:0auto;}
  4. /*----------------------------------------------------------------------------*/
  5. /*defaultstyling*/
  6. .nav,.navul{list-style-type:none;margin:0;padding:0;}
  7. .nava{text-decoration:none;}
  8. .nav{font-family:arial,sans-serif;font-size:12px;width:650px;margin:0auto;}
  9. /*stylethelinks*/
  10. .nava{background:url(ulmulti3/box.gif)no-repeatrightrightcenter;}
  11. .nava.top{background:url(ulmulti3/box.gif)no-repeatrightrighttop;}
  12. .nava.top2{background:url(ulmulti3/box2.gif)no-repeatrightrighttop;}
  13. .nava.bottombottom{background:url(ulmulti3/box.gif)no-repeatrightrightbottombottom;}
  14. .rightrightulula{background:url(ulmulti3/box3.gif)no-repeatrightrightcenter;}
  15. .rightrightulula.top2{background:url(ulmulti3/box3.gif)no-repeatrightrighttop;}
  16. .rightrightulula.bottombottom{background:url(ulmulti3/box3.gif)no-repeatrightrightbottombottom;}
  17. /*stylethe<b>elementsothatisdoesnotaffectthesizeofthelink*/
  18. .navab{color:#fff;font-weight:normal;display:block;padding:5px10px5px15px;}
  19. .nav.fly.mainb{background:transparenturl(ulmulti3/arrow.gif)no-repeat117px9px;}
  20. .nav.downb{background:transparenturl(ulmulti3/arrow2.gif)no-repeat115px11px;}
  21. .nav.rightrightulb{text-align:rightright;}
  22. .nav.rightrightululb{padding:5px15px5px10px;}
  23. .nav.rightrightul.mainb{background:transparenturl(ulmulti3/arrow3.gif)no-repeat15px9px;text-align:rightright;}
  24. .nav.rightrightulul.mainb{background:transparenturl(ulmulti3/arrow3.gif)no-repeat5px9px;text-align:rightright;}
  25. /*HEIGHT*/
  26. .navulul{top:-24px;}/*positionthetopoftheflyoutfirstsubmenus*/
  27. .navululul{top:-25px;}/*positionthetopoftheflyoutsecondandthirdsubmenus*/
  28. .navul.two{top:-40px;}/*positionthetopoftheflyoutsubmenuswithprevioustextontwolines*/
  29. /*WIDTHchangethisWITHCAREtosuityourrequirements*/
  31. /*setthelinkwidthhere*/
  32. .nav.drop,.nava{width:130px;}
  33. .navulli{max-width:130px;}/*fixforIE8*/
  34. /*settheleftflyoutpositionhere*/
  35. .navulul{left:130px;}
  36. /*settherightflyoutpositionhere*/
  37. .navli.rightrightulul{left:auto;rightright:120px;}
  38. .navli.rightrightululul{left:auto;rightright:130px;}
  39. /*makethisWIDTH-1px*//*orWIDTH-0.063emifusingemsizing*/
  40. .nava{margin-right:-129px;}
  41. /*----------------------------------------------------------------------------*/
  43. /*DONOTCHANGEANYTHINGBELOW*/
  44. .navli{float:left;}/*fixesIEbugs,andallowsforclearing*/
  45. .navul{float:left;position:relative;z-index:20;}/*necessaryforfloatdropandtostackthe<ul>s*/
  46. .navulli{clear:left;}/*mustclearthefloatedlistiteminsidesublist*/
  47. .nava{position:relative;display:block;}/*needstohaveaposition,tobeabovetherest*/
  48. .nava.main{float:left;/*necessaryforfloatdrop*/margin-top:10000px;}/*bringthetoplevellinksbackintoview*/
  49. .nav.drop,.nav.fly{margin-top:-10000px;}/*hidethesublinksandtheircontainers,operahaslowupperlimits*/
  50. .navul{margin-bottom:-5000px;}/*avoidanyinteractionbetweenthesubs,canbeanylargesize*/
  51. /*ThebitthatdoesALLtheworktobringthesubmenusintoview*/
  53. .nava:hover,.nava:focus,.nava:active{margin-right:0;z-index:10;outline:0;}
  54. .nava:hoverb,.nava:focusb,.nava:activeb{color:#000;cursor:pointer;}/*thisisforkeyboardtabbingcolorchange*/
  55. /*OPERAfix*/
  56. .navul:hover,.navulul:hover{clear:left;}/*tostopintermittentsublink:hoverproblems*/
  58. /*----------------------------------------------------------------------------*/
  59. </style>
  60. <!--[iflteIE7]>
  61. <styletype="text/css">
  62. /*bugfixesforIE7andlower-DONOTCHANGE*/
  63. .nav.fly{width:99%;}/*makeeachflyout99%oftheprevouslevel*/
  64. a:active{}/*requiresablankstylefor:activetostopitbeingbuggy*/
  65. </style>

html代码：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <divid="backgroundHolder">
  3. <ulclass="nav">
  4. <liclass="drop"><aclass="maintop"rel="nofollow noopener noreferrer" href="#url"><b>Home</b></a></li>
  5. <liclass="drop"><aclass="maindowntop"rel="nofollow noopener noreferrer" href="#url"><b>Equipment</b></a>
  6. <ul>
  7. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Cameras</b></a>
  8. <ul>
  9. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>FilmType</b></a></li>
  10. <li><arel="nofollow noopener noreferrer" href="#url"><b>Compact</b></a></li>
  11. <li><arel="nofollow noopener noreferrer" href="#url"><b>Polaroid</b></a></li>
  12. <li><arel="nofollow noopener noreferrer" href="#url"><b>Digital</b></a></li>
  13. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>DigitalSLR</b></a>
  14. <ul>
  15. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  16. <li><arel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  17. <li><arel="nofollow noopener noreferrer" href="#url"><b>Panasonic</b></a></li>
  18. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Kodak</b></a></li>
  19. </ul>
  20. </li>
  21. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>SecondHand</b></a></li>
  22. </ul>
  23. </li>
  24. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>VideoCameras&Accessories</b></a>
  25. <ulclass="two">
  26. <liclass="fly"><aclass="maintop2"rel="nofollow noopener noreferrer" href="#url"><b>LatestModels</b></a>
  27. <ul>
  28. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  29. <li><arel="nofollow noopener noreferrer" href="#url"><b>Panasonic</b></a></li>
  30. <li><arel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  31. <li><arel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  32. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Minolta</b></a></li>
  33. </ul>
  34. </li>
  35. <li><arel="nofollow noopener noreferrer" href="#url"><b>SpecialOffers</b></a></li>
  36. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Professional</b></a></li>
  37. </ul>
  38. </li>
  39. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Lenses</b></a>
  40. <ul>
  41. <liclass="fly"><aclass="maintop2"rel="nofollow noopener noreferrer" href="#url"><b>Digital</b></a>
  42. <ul>
  43. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Standard</b></a></li>
  44. <li><arel="nofollow noopener noreferrer" href="#url"><b>Telephoto</b></a></li>
  45. <li><arel="nofollow noopener noreferrer" href="#url"><b>WideAngle</b></a></li>
  46. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Zoom</b></a>
  47. <ul>
  48. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  49. <li><arel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  50. <li><arel="nofollow noopener noreferrer" href="#url"><b>Minolta</b></a></li>
  51. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Panasonic</b></a></li>
  52. </ul>
  53. </li>
  54. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>ZoomwithMacro</b></a>
  55. <ul>
  56. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Panasonic</b></a></li>
  57. <li><arel="nofollow noopener noreferrer" href="#url"><b>Minolta</b></a></li>
  58. <li><arel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  59. <li><arel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  60. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  61. </ul>
  62. </li>
  63. <li><arel="nofollow noopener noreferrer" href="#url"><b>Fisheye</b></a></li>
  64. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>x2converters</b></a></li>
  65. </ul>
  66. </li>
  67. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>StandardSLR</b></a>
  68. <ul>
  69. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  70. <li><arel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  71. <li><arel="nofollow noopener noreferrer" href="#url"><b>Panasonic</b></a></li>
  72. <li><arel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  73. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Minolta</b></a></li>
  74. </ul>
  75. </li>
  76. <li><arel="nofollow noopener noreferrer" href="#url"><b>Cases</b></a></li>
  77. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>LargeFormat</b></a>
  78. <ul>
  79. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Hasselblad</b></a></li>
  80. <li><arel="nofollow noopener noreferrer" href="#url"><b>Arca-Swiss</b></a></li>
  81. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Leica</b></a></li>
  82. </ul>
  83. </li>
  84. <li><arel="nofollow noopener noreferrer" href="#url"><b>LensHoods</b></a></li>
  85. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>LensCleaners</b></a></li>
  86. </ul>
  87. </li>
  88. <li><arel="nofollow noopener noreferrer" href="#url"><b>Tripods</b></a></li>
  89. <li><arel="nofollow noopener noreferrer" href="#url"><b>Flashguns</b></a></li>
  90. <li><arel="nofollow noopener noreferrer" href="#url"><b>Accessories,filters&lenscovers</b></a></li>
  91. <li><arel="nofollow noopener noreferrer" href="#url"><b>SpecialOffers</b></a></li>
  92. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Electronics</b></a></li>
  93. </ul>
  94. </li>
  95. <liclass="drop"><aclass="maindowntop"rel="nofollow noopener noreferrer" href="#url"><b>Accessories</b></a>
  96. <ul>
  97. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Flashguns</b></a>
  98. <ul>
  99. <liclass="fly"><aclass="maintop2"rel="nofollow noopener noreferrer" href="#url"><b>DigitalCameras</b></a>
  100. <ul>
  101. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  102. <li><arel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  103. <li><arel="nofollow noopener noreferrer" href="#url"><b>Panasonic</b></a></li>
  104. <li><arel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  105. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Kodak</b></a></li>
  106. </ul>
  107. </li>
  108. <li><arel="nofollow noopener noreferrer" href="#url"><b>FilmCameras</b></a></li>
  109. <li><arel="nofollow noopener noreferrer" href="#url"><b>Reflectors</b></a></li>
  110. <li><arel="nofollow noopener noreferrer" href="#url"><b>Stands</b></a></li>
  111. <li><arel="nofollow noopener noreferrer" href="#url"><b>RemoteControl</b></a></li>
  112. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Batteries</b></a></li>
  113. </ul>
  114. </li>
  115. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Filters</b></a>
  116. <ul>
  117. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>UltraViolet</b></a></li>
  118. <li><arel="nofollow noopener noreferrer" href="#url"><b>Lensprotection</b></a></li>
  119. <li><arel="nofollow noopener noreferrer" href="#url"><b>Yellow</b></a></li>
  120. <li><arel="nofollow noopener noreferrer" href="#url"><b>Red</b></a></li>
  121. <li><arel="nofollow noopener noreferrer" href="#url"><b>Orange</b></a></li>
  122. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Blue</b></a></li>
  123. </ul>
  124. </li>
  125. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>RemoteControl</b></a>
  126. <ul>
  127. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  128. <li><arel="nofollow noopener noreferrer" href="#url"><b>Nikon</b></a></li>
  129. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  130. </ul>
  131. </li>
  132. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>CameraCases</b></a>
  133. <ul>
  134. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  135. <li><arel="nofollow noopener noreferrer" href="#url"><b>Nikox</b></a></li>
  136. <li><arel="nofollow noopener noreferrer" href="#url"><b>Canon</b></a></li>
  137. <li><arel="nofollow noopener noreferrer" href="#url"><b>Pentax</b></a></li>
  138. <li><arel="nofollow noopener noreferrer" href="#url"><b>Kodak</b></a></li>
  139. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Minolta</b></a></li>
  140. </ul>
  141. </li>
  142. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>LensBrush</b></a></li>
  143. </ul>
  144. </li>
  145. <liclass="dropright"><aclass="maindowntop"rel="nofollow noopener noreferrer" href="#url"><b>Outlets</b></a>
  146. <ul>
  147. <li><arel="nofollow noopener noreferrer" href="#url"><b>Support</b></a></li>
  148. <li><arel="nofollow noopener noreferrer" href="#url"><b>Buying</b></a></li>
  149. <li><arel="nofollow noopener noreferrer" href="#url"><b>Photographers</b></a></li>
  150. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Stockist</b></a>
  151. <ul>
  152. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Currys</b></a></li>
  153. <li><arel="nofollow noopener noreferrer" href="#url"><b>Dixons</b></a></li>
  154. <li><arel="nofollow noopener noreferrer" href="#url"><b>Jessops</b></a></li>
  155. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Staples</b></a></li>
  156. </ul>
  157. </li>
  158. <li><arel="nofollow noopener noreferrer" href="#5"><b>General</b></a></li>
  159. <liclass="fly"><aclass="mainbottom"rel="nofollow noopener noreferrer" href="#url"><b>Sales</b></a>
  160. <ul>
  161. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>USA</b></a></li>
  162. <li><arel="nofollow noopener noreferrer" href="#url"><b>CANADA</b></a></li>
  163. <li><arel="nofollow noopener noreferrer" href="#url"><b>SouthAmerica</b></a></li>
  164. <liclass="fly"><aclass="main"rel="nofollow noopener noreferrer" href="#url"><b>Europe</b></a>
  165. <ul>
  166. <li><aclass="top2"rel="nofollow noopener noreferrer" href="#url"><b>Britain</b></a></li>
  167. <li><arel="nofollow noopener noreferrer" href="#url"><b>France</b></a></li>
  168. <li><arel="nofollow noopener noreferrer" href="#url"><b>Germany</b></a></li>
  169. <li><arel="nofollow noopener noreferrer" href="#url"><b>Spain</b></a></li>
  170. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Italy</b></a></li>
  171. </ul>
  172. </li>
  173. <li><arel="nofollow noopener noreferrer" href="#url"><b>Australia</b></a></li>
  174. <li><aclass="bottom"rel="nofollow noopener noreferrer" href="#url"><b>Asia</b></a></li>
  175. </ul>
  176. </li>
  177. </ul>
  178. </li>
  179. <liclass="drop"><aclass="maintop"rel="nofollow noopener noreferrer" href="#url"><b>PrivacyPolicy</b></a></li>
  180. </ul>
  181. </div>
  182. <br>
  183. <br>
  184. <divalign="center"></div>
  186. </body>

源码下载：CSS多级下拉横向导航菜单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题