如何使用纯css3实现的竖形二级导航

发布时间:2022-03-01 11:51:37 作者:小新
来源:亿速云 阅读:149

这篇文章主要介绍了如何使用纯css3实现的竖形二级导航,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

  html代码:

  1. <div style="width: 700px; margin: auto;">  

  2.         <div class="W1-h26">  

  3.             <ul>  

  4.                 <li class="has-sub"><a href="#">Menu 1</a>  

  5.                     <ul>  

  6.                         <li class="has-sub"><a href="#">Submenu 1.1</a>  

  7.                             <ul>  

  8.                                 <li><a href="#">Submenu 1.1.1</a></li>  

  9.                                 <li class="has-sub"><a href="#">Submenu 1.1.2</a>  

  10.                                     <ul>  

  11.                                         <li><a href="#">Submenu 1.1.2.1</a></li>  

  12.                                         <li><a href="#">Submenu 1.1.2.2</a></li>  

  13.                                     </ul>  

  14.                                 </li>  

  15.                             </ul>  

  16.                         </li>  

  17.                         <li><a href="#">Submenu 1.2</a></li>  

  18.                     </ul>  

  19.                 </li>  

  20.                 <li class="has-sub"><a href="#">Menu 2</a>  

  21.                     <ul>  

  22.                         <li><a href="#">Submenu 2.1</a></li>  

  23.                         <li><a href="#">Submenu 2.2</a></li>  

  24.                     </ul>  

  25.                 </li>  

  26.                 <li class="has-sub"><a href="#">Menu 3</a>  

  27.                     <ul>  

  28.                         <li><a href="#">Submenu 3.1</a></li>  

  29.                         <li><a href="#">Submenu 3.2</a></li>  

  30.                     </ul>  

  31.                 </li>  

  32.             </ul>  

  33.         </div>  

  34.     </div>  

  css3代码:

CSS Code复制内容到剪贴板

  1. .W1-h26 {   

  2.   padding: 0;   

  3.   margin: 0;   

  4.   border: 0;   

  5.   line-height: 1;   

  6. }   

  7. .W1-h26 ul,   

  8. .W1-h26 ul li,   

  9. .W1-h26 ul ul {   

  10.   list-stylenone;   

  11.   margin: 0;   

  12.   padding: 0;   

  13. }   

  14. .W1-h26 ul {   

  15.   positionrelative;   

  16.   z-index: 500;   

  17.   floatleft;   

  18. }   

  19. .W1-h26 ul li {   

  20.   floatleft;   

  21.   min-height: 0.05em;   

  22.   line-height: 1em;   

  23.   vertical-alignmiddle;   

  24.   positionrelative;   

  25. }   

  26. .W1-h26 ul li.hover,   

  27. .W1-h26 ul li:hover {   

  28.   positionrelative;   

  29.   z-index: 510;   

  30.   cursordefault;   

  31. }   

  32. .W1-h26 ul ul {   

  33.   visibilityhidden;   

  34.   positionabsolute;   

  35.   top: 100%;   

  36.   left0px;   

  37.   z-index: 520;   

  38.   width: 100%;   

  39. }   

  40. .W1-h26 ul ul li {   

  41.   floatnone;   

  42. }   

  43. .W1-h26 ul ul ul {   

  44.   top: 0;   

  45.   rightright: 0;   

  46. }   

  47. .W1-h26 ul li:hover > ul {   

  48.   visibilityvisible;   

  49. }   

  50. .W1-h26 ul ul {   

  51.   top: 0;   

  52.   left: 99%;   

  53. }   

  54. .W1-h26 ul li {   

  55.   floatnone;   

  56. }   

  57. .W1-h26 ul ul {   

  58.   margin-top: 0.05em;   

  59. }   

  60. .W1-h26 {   

  61.   width: 13em;   

  62.   background#333333;   

  63.   font-family'Oxygen Mono'TahomaArialsans-serif;   

  64.   zoom: 1;   

  65. }   

  66. .W1-h16:before {   

  67.   content'';   

  68.   displayblock;   

  69. }   

  70. .W1-h16:after {   

  71.   content'';   

  72.   display: table;   

  73.   clearboth;   

  74. }   

  75. .W1-h26 a {   

  76.   displayblock;   

  77.   padding: 1em 1.3em;   

  78.   color#ffffff;   

  79.   text-decorationnone;   

  80.   text-transformuppercase;   

  81. }   

  82. .W1-h26 > ul {   

  83.   width: 13em;   

  84. }   

  85. .W1-h26 ul ul {   

  86.   width: 13em;   

  87. }   

  88. .W1-h26 > ul > li > a {   

  89.   border-right: 0.3em solid #1b9bff;   

  90.   color#ffffff;   

  91. }   

  92. .W1-h26 > ul > li > a:hover {   

  93.   color#ffffff;   

  94. }   

  95. .W1-h26 > ul > li a:hover,   

  96. .W1-h26 > ul > li:hover a {   

  97.   background#1b9bff;   

  98. }   

  99. .W1-h26 li {   

  100.   positionrelative;   

  101. }   

  102. .W1-h26 ul li.has-sub > a:after {   

  103.   content'&raquo;';   

  104.   positionabsolute;   

  105.   rightright: 1em;   

  106. }   

  107. .W1-h26 ul ul li.first {   

  108.   -webkit-border-radius: 0 3px 0 0;   

  109.   -moz-border-radius: 0 3px 0 0;   

  110.   border-radius: 0 3px 0 0;   

  111. }   

  112. .W1-h26 ul ul li.last {   

  113.   -webkit-border-radius: 0 0 3px 0;   

  114.   -moz-border-radius: 0 0 3px 0;   

  115.   border-radius: 0 0 3px 0;   

  116.   border-bottom: 0;   

  117. }   

  118. .W1-h26 ul ul {   

  119.   -webkit-border-radius: 0 3px 3px 0;   

  120.   -moz-border-radius: 0 3px 3px 0;   

  121.   border-radius: 0 3px 3px 0;   

  122. }   

  123. .W1-h26 ul ul {   

  124.   border1px solid #0082e7;   

  125. }   

  126. .W1-h26 ul ul a {   

  127.   color#ffffff;   

  128. }   

  129. .W1-h26 ul ul a:hover {   

  130.   color#ffffff;   

  131. }   

  132. .W1-h26 ul ul li {   

  133.   border-bottom1px solid #0082e7;   

  134. }   

  135. .W1-h26 ul ul li:hover > a {   

  136.   background#4eb1ff;   

  137.   color#ffffff;   

  138. }   

  139. .W1-h26.align-rightright > ul > li > a {   

  140.   border-left: 0.3em solid #1b9bff;   

  141.   border-rightnone;   

  142. }   

  143. .W1-h26.align-rightright {   

  144.   floatrightright;   

  145. }   

  146. .W1-h26.align-rightright li {   

  147.   text-alignrightright;   

  148. }   

  149. .W1-h26.align-rightright ul li.has-sub > a:before {   

  150.   content'+';   

  151.   positionabsolute;   

  152.   top: 50%;   

  153.   left15px;   

  154.   margin-top: -6px;   

  155. }   

  156. .W1-h26.align-rightright ul li.has-sub > a:after {   

  157.   contentnone;   

  158. }   

  159. .W1-h26.align-rightright ul ul {   

  160.   visibilityhidden;   

  161.   positionabsolute;   

  162.   top: 0;   

  163.   left: -100%;   

  164.   z-index: 598;   

  165.   width: 100%;   

  166. }   

  167. .W1-h26.align-rightright ul ul li.first {   

  168.   -webkit-border-radius: 3px 0 0 0;   

  169.   -moz-border-radius: 3px 0 0 0;   

  170.   border-radius: 3px 0 0 0;   

  171. }   

  172. .W1-h26.align-rightright ul ul li.last {   

  173.   -webkit-border-radius: 0 0 0 3px;   

  174.   -moz-border-radius: 0 0 0 3px;   

  175.   border-radius: 0 0 0 3px;   

  176. }   

  177. .W1-h26.align-rightright ul ul {   

  178.   -webkit-border-radius: 3px 0 0 3px;   

  179.   -moz-border-radius: 3px 0 0 3px;   

  180.   border-radius: 3px 0 0 3px;   

  181. }  

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用纯css3实现的竖形二级导航”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 纯css3绘制三角形
  2. bootstrap-导航(标签形tab导航)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:如何使用css3实现可以计算的自适应布局

下一篇:怎么利用CSS3实现input输入框动画样式库

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》