溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用css3實現(xiàn)豎形二級導(dǎo)航

發(fā)布時間：2021-07-30 15:55:01 來源：億速云 閱讀：106 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“怎么用css3實現(xiàn)豎形二級導(dǎo)航”，在日常操作中，相信很多人在怎么用css3實現(xiàn)豎形二級導(dǎo)航問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用css3實現(xiàn)豎形二級導(dǎo)航”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習吧！

　　之前為大家分享了好多導(dǎo)航菜單。今天給大家?guī)硪豢罴僣ss3實現(xiàn)的豎形二級導(dǎo)航。這款導(dǎo)航菜單可以是無限級。一起看下效果圖：

怎么用css3實現(xiàn)豎形二級導(dǎo)航

　　實現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  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復(fù)制內(nèi)容到剪貼板

  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-style: none;   

  11.   margin: 0;   

  12.   padding: 0;   

  13. }   

  14. .W1-h26 ul {   

  15.   position: relative;   

  16.   z-index: 500;   

  17.   float: left;   

  18. }   

  19. .W1-h26 ul li {   

  20.   float: left;   

  21.   min-height: 0.05em;   

  22.   line-height: 1em;   

  23.   vertical-align: middle;   

  24.   position: relative;   

  25. }   

  26. .W1-h26 ul li.hover,   

  27. .W1-h26 ul li:hover {   

  28.   position: relative;   

  29.   z-index: 510;   

  30.   cursor: default;   

  31. }   

  32. .W1-h26 ul ul {   

  33.   visibility: hidden;   

  34.   position: absolute;   

  35.   top: 100%;   

  36.   left: 0px;   

  37.   z-index: 520;   

  38.   width: 100%;   

  39. }   

  40. .W1-h26 ul ul li {   

  41.   float: none;   

  42. }   

  43. .W1-h26 ul ul ul {   

  44.   top: 0;   

  45.   rightright: 0;   

  46. }   

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

  48.   visibility: visible;   

  49. }   

  50. .W1-h26 ul ul {   

  51.   top: 0;   

  52.   left: 99%;   

  53. }   

  54. .W1-h26 ul li {   

  55.   float: none;   

  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', 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-h26 a {   

  76.   display: block;   

  77.   padding: 1em 1.3em;   

  78.   color: #ffffff;   

  79.   text-decoration: none;   

  80.   text-transform: uppercase;   

  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.   position: relative;   

  101. }   

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

  103.   content: '&raquo;';   

  104.   position: absolute;   

  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.   border: 1px 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-bottom: 1px 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-right: none;   

  142. }   

  143. .W1-h26.align-rightright {   

  144.   float: rightright;   

  145. }   

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

  147.   text-align: rightright;   

  148. }   

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

  150.   content: '+';   

  151.   position: absolute;   

  152.   top: 50%;   

  153.   left: 15px;   

  154.   margin-top: -6px;   

  155. }   

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

  157.   content: none;   

  158. }   

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

  160.   visibility: hidden;   

  161.   position: absolute;   

  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. }  

到此，關(guān)于“怎么用css3實現(xiàn)豎形二級導(dǎo)航”的學(xué)習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習，快去試試吧！若想繼續(xù)學(xué)習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手