怎么用純css3實現豎形無限級導航

這篇文章主要講解了“怎么用純css3實現豎形無限級導航”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用純css3實現豎形無限級導航”吧！

之前為大家分享了好多導航菜單。今天給大家帶來一款純css3實現的豎形無限級導航。這款導航菜單可以是無限級。一起看下效果圖：

實現的代碼。

html代碼：

代碼如下:

<div >
       <div class="W1-h26">
           <ul>
               <li class="has-sub"><a href="#">Menu 1</a>
                   <ul>
                       <li class="has-sub"><a href="#">Submenu 1.1</a>
                           <ul>
                               <li><a href="#">Submenu 1.1.1</a></li>
                               <li class="has-sub"><a href="#">Submenu 1.1.2</a>
                                   <ul>
                                       <li><a href="#">Submenu 1.1.2.1</a></li>
                                       <li><a href="#">Submenu 1.1.2.2</a></li>
                                   </ul>
                               </li>
                           </ul>
                       </li>
                       <li><a href="#">Submenu 1.2</a></li>
                   </ul>
               </li>
               <li class="has-sub"><a href="#">Menu 2</a>
                   <ul>
                       <li><a href="#">Submenu 2.1</a></li>
                       <li><a href="#">Submenu 2.2</a></li>
                   </ul>
               </li>
               <li class="has-sub"><a href="#">Menu 3</a>
                   <ul>
                       <li><a href="#">Submenu 3.1</a></li>
                       <li><a href="#">Submenu 3.2</a></li>
                   </ul>
               </li>
           </ul>
       </div>
   </div>

css3代碼：

代碼如下:

.W1-h26 {
 padding: 0;
 margin: 0;
 border: 0;
 line-height: 1;
}
.W1-h26 ul,
.W1-h26 ul li,
.W1-h26 ul ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.W1-h26 ul {
 position: relative;
 z-index: 500;
 float: left;
}
.W1-h26 ul li {
 float: left;
 min-height: 0.05em;
 line-height: 1em;
 vertical-align: middle;
 position: relative;
}
.W1-h26 ul li.hover,
.W1-h26 ul li:hover {
 position: relative;
 z-index: 510;
 cursor: default;
}
.W1-h26 ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0px;
 z-index: 520;
 width: 100%;
}
.W1-h26 ul ul li {
 float: none;
}
.W1-h26 ul ul ul {
 top: 0;
 right: 0;
}
.W1-h26 ul li:hover > ul {
 visibility: visible;
}
.W1-h26 ul ul {
 top: 0;
 left: 99%;
}
.W1-h26 ul li {
 float: none;
}
.W1-h26 ul ul {
 margin-top: 0.05em;
}
.W1-h26 {
 width: 13em;
 background: #333333;
 font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
 zoom: 1;
}
.W1-h26:before {
 content: '';
 display: block;
}
.W1-h26:after {
 content: '';
 display: table;
 clear: both;
}
.W1-h26 a {
 display: block;
 padding: 1em 1.3em;
 color: #ffffff;
 text-decoration: none;
 text-transform: uppercase;
}
.W1-h26 > ul {
 width: 13em;
}
.W1-h26 ul ul {
 width: 13em;
}
.W1-h26 > ul > li > a {
 border-right: 0.3em solid #1b9bff;
 color: #ffffff;
}
.W1-h26 > ul > li > a:hover {
 color: #ffffff;
}
.W1-h26 > ul > li a:hover,
.W1-h26 > ul > li:hover a {
 background: #1b9bff;
}
.W1-h26 li {
 position: relative;
}
.W1-h26 ul li.has-sub > a:after {
 content: '&raquo;';
 position: absolute;
 right: 1em;
}
.W1-h26 ul ul li.first {
 -webkit-border-radius: 0 3px 0 0;
 -moz-border-radius: 0 3px 0 0;
 border-radius: 0 3px 0 0;
}
.W1-h26 ul ul li.last {
 -webkit-border-radius: 0 0 3px 0;
 -moz-border-radius: 0 0 3px 0;
 border-radius: 0 0 3px 0;
 border-bottom: 0;
}
.W1-h26 ul ul {
 -webkit-border-radius: 0 3px 3px 0;
 -moz-border-radius: 0 3px 3px 0;
 border-radius: 0 3px 3px 0;
}
.W1-h26 ul ul {
 border: 1px solid #0082e7;
}
.W1-h26 ul ul a {
 color: #ffffff;
}
.W1-h26 ul ul a:hover {
 color: #ffffff;
}
.W1-h26 ul ul li {
 border-bottom: 1px solid #0082e7;
}
.W1-h26 ul ul li:hover > a {
 background: #4eb1ff;
 color: #ffffff;
}
.W1-h26.align-right > ul > li > a {
 border-left: 0.3em solid #1b9bff;
 border-right: none;
}
.W1-h26.align-right {
 float: right;
}
.W1-h26.align-right li {
 text-align: right;
}
.W1-h26.align-right ul li.has-sub > a:before {
 content: '+';
 position: absolute;
 top: 50%;
 left: 15px;
 margin-top: -6px;
}
.W1-h26.align-right ul li.has-sub > a:after {
 content: none;
}
.W1-h26.align-right ul ul {
 visibility: hidden;
 position: absolute;
 top: 0;
 left: -100%;
 z-index: 598;
 width: 100%;
}
.W1-h26.align-right ul ul li.first {
 -webkit-border-radius: 3px 0 0 0;
 -moz-border-radius: 3px 0 0 0;
 border-radius: 3px 0 0 0;
}
.W1-h26.align-right ul ul li.last {
 -webkit-border-radius: 0 0 0 3px;
 -moz-border-radius: 0 0 0 3px;
 border-radius: 0 0 0 3px;
}
.W1-h26.align-right ul ul {
 -webkit-border-radius: 3px 0 0 3px;
 -moz-border-radius: 3px 0 0 3px;
 border-radius: 3px 0 0 3px;
}

感謝各位的閱讀，以上就是“怎么用純css3實現豎形無限級導航”的內容了，經過本文的學習后，相信大家對怎么用純css3實現豎形無限級導航這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！