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

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、岳池網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

實現(xiàn)的代碼。

html代碼：

代碼如下:

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: '»';
 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實現(xiàn)豎形無限級導(dǎo)航”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用純css3實現(xiàn)豎形無限級導(dǎo)航這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

名稱欄目：怎么用純css3實現(xiàn)豎形無限級導(dǎo)航-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://weahome.cn/article/ddddie.html