怎么用纯css3实现竖形无限级导航-创新互联

这篇文章主要讲解了“怎么用纯css3实现竖形无限级导航”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用纯css3实现竖形无限级导航”吧！

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

实现的代码。

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实现竖形无限级导航”的内容了，经过本文的学习后，相信大家对怎么用纯css3实现竖形无限级导航这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！