一款纯css3如何实现的竖形二级导航的实例好代码教程

互联网
你若决定灿烂，倒影也会美得让人惊叹。早安！幸运从来不是偶然，你所做的每件事，都会有惊喜等待着你。早安。

　　之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divstyle="width:700px;margin:auto;">
  2. <divclass="W1-h16">
  3. <ul>
  4. <liclass="has-sub"><arel="nofollow noopener noreferrer" href="#">Menu1</a>
  5. <ul>
  6. <liclass="has-sub"><arel="nofollow noopener noreferrer" href="#">Submenu1.1</a>
  7. <ul>
  8. <li><arel="nofollow noopener noreferrer" href="#">Submenu1.1.1</a></li>
  9. <liclass="has-sub"><arel="nofollow noopener noreferrer" href="#">Submenu1.1.2</a>
  10. <ul>
  11. <li><arel="nofollow noopener noreferrer" href="#">Submenu1.1.2.1</a></li>
  12. <li><arel="nofollow noopener noreferrer" href="#">Submenu1.1.2.2</a></li>
  13. </ul>
  14. </li>
  15. </ul>
  16. </li>
  17. <li><arel="nofollow noopener noreferrer" href="#">Submenu1.2</a></li>
  18. </ul>
  19. </li>
  20. <liclass="has-sub"><arel="nofollow noopener noreferrer" href="#">Menu2</a>
  21. <ul>
  22. <li><arel="nofollow noopener noreferrer" href="#">Submenu2.1</a></li>
  23. <li><arel="nofollow noopener noreferrer" href="#">Submenu2.2</a></li>
  24. </ul>
  25. </li>
  26. <liclass="has-sub"><arel="nofollow noopener noreferrer" href="#">Menu3</a>
  27. <ul>
  28. <li><arel="nofollow noopener noreferrer" href="#">Submenu3.1</a></li>
  29. <li><arel="nofollow noopener noreferrer" href="#">Submenu3.2</a></li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </div>
  34. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. .W1-h16{
  2. padding:0;
  3. margin:0;
  4. border:0;
  5. line-height:1;
  6. }
  7. .W1-h16ul,
  8. .W1-h16ulli,
  9. .W1-h16ulul{
  10. list-style:none;
  11. margin:0;
  12. padding:0;
  13. }
  14. .W1-h16ul{
  15. position:relative;
  16. z-index:500;
  17. float:left;
  18. }
  19. .W1-h16ulli{
  20. float:left;
  21. min-height:0.05em;
  22. line-height:1em;
  23. vertical-align:middle;
  24. position:relative;
  25. }
  26. .W1-h16ulli.hover,
  27. .W1-h16ulli:hover{
  28. position:relative;
  29. z-index:510;
  30. cursor:default;
  31. }
  32. .W1-h16ulul{
  33. visibility:hidden;
  34. position:absolute;
  35. top:100%;
  36. left:0px;
  37. z-index:520;
  38. width:100%;
  39. }
  40. .W1-h16ululli{
  41. float:none;
  42. }
  43. .W1-h16ululul{
  44. top:0;
  45. rightright:0;
  46. }
  47. .W1-h16ulli:hover>ul{
  48. visibility:visible;
  49. }
  50. .W1-h16ulul{
  51. top:0;
  52. left:99%;
  53. }
  54. .W1-h16ulli{
  55. float:none;
  56. }
  57. .W1-h16ulul{
  58. margin-top:0.05em;
  59. }
  60. .W1-h16{
  61. width:13em;
  62. background:#333333;
  63. font-family:'OxygenMono',Tahoma,Arial,sans-serif;
  64. zoom:1;
  65. }
  66. .W1-h16:before{
  67. content:'';
  68. display:block;
  69. }
  70. .W1-h16:after{
  71. content:'';
  72. display:table;
  73. clear:both;
  74. }
  75. .W1-h16a{
  76. display:block;
  77. padding:1em1.3em;
  78. color:#ffffff;
  79. text-decoration:none;
  80. text-transform:uppercase;
  81. }
  82. .W1-h16>ul{
  83. width:13em;
  84. }
  85. .W1-h16ulul{
  86. width:13em;
  87. }
  88. .W1-h16>ul>li>a{
  89. border-right:0.3emsolid#1b9bff;
  90. color:#ffffff;
  91. }
  92. .W1-h16>ul>li>a:hover{
  93. color:#ffffff;
  94. }
  95. .W1-h16>ul>lia:hover,
  96. .W1-h16>ul>li:hovera{
  97. background:#1b9bff;
  98. }
  99. .W1-h16li{
  100. position:relative;
  101. }
  102. .W1-h16ulli.has-sub>a:after{
  103. content:'»';
  104. position:absolute;
  105. rightright:1em;
  106. }
  107. .W1-h16ululli.first{
  108. -webkit-border-radius:03px00;
  109. -moz-border-radius:03px00;
  110. border-radius:03px00;
  111. }
  112. .W1-h16ululli.last{
  113. -webkit-border-radius:003px0;
  114. -moz-border-radius:003px0;
  115. border-radius:003px0;
  116. border-bottom:0;
  117. }
  118. .W1-h16ulul{
  119. -webkit-border-radius:03px3px0;
  120. -moz-border-radius:03px3px0;
  121. border-radius:03px3px0;
  122. }
  123. .W1-h16ulul{
  124. border:1pxsolid#0082e7;
  125. }
  126. .W1-h16ulula{
  127. color:#ffffff;
  128. }
  129. .W1-h16ulula:hover{
  130. color:#ffffff;
  131. }
  132. .W1-h16ululli{
  133. border-bottom:1pxsolid#0082e7;
  134. }
  135. .W1-h16ululli:hover>a{
  136. background:#4eb1ff;
  137. color:#ffffff;
  138. }
  139. .W1-h16.align-rightright>ul>li>a{
  140. border-left:0.3emsolid#1b9bff;
  141. border-right:none;
  142. }
  143. .W1-h16.align-rightright{
  144. float:rightright;
  145. }
  146. .W1-h16.align-rightrightli{
  147. text-align:rightright;
  148. }
  149. .W1-h16.align-rightrightulli.has-sub>a:before{
  150. content:'+';
  151. position:absolute;
  152. top:50%;
  153. left:15px;
  154. margin-top:-6px;
  155. }
  156. .W1-h16.align-rightrightulli.has-sub>a:after{
  157. content:none;
  158. }
  159. .W1-h16.align-rightrightulul{
  160. visibility:hidden;
  161. position:absolute;
  162. top:0;
  163. left:-100%;
  164. z-index:598;
  165. width:100%;
  166. }
  167. .W1-h16.align-rightrightululli.first{
  168. -webkit-border-radius:3px000;
  169. -moz-border-radius:3px000;
  170. border-radius:3px000;
  171. }
  172. .W1-h16.align-rightrightululli.last{
  173. -webkit-border-radius:0003px;
  174. -moz-border-radius:0003px;
  175. border-radius:0003px;
  176. }
  177. .W1-h16.align-rightrightulul{
  178. -webkit-border-radius:3px003px;
  179. -moz-border-radius:3px003px;
  180. border-radius:3px003px;
  181. }

相关推荐：

一款纯css3实现的环形导航菜单

一款基于jquery和css3的响应式二级导航菜单

一款简洁的纯css3代码实现的动画导航

以上就是一款纯css3如何实现的竖形二级导航的实例好代码教程。信任不是指没有误会，而是总会给对方把误会解释清楚的机会。更多关于一款纯css3如何实现的竖形二级导航的实例好代码教程请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例