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

这篇文章主要讲解了“怎么用纯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实现竖形无限级导航这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!

本文题目:怎么用纯css3实现竖形无限级导航-创新互联
本文URL:https://www.cdcxhl.com/article4/ddddie.html

成都网站建设公司_创新互联,为您提供虚拟主机外贸建站定制网站网站排名建站公司云服务器

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

小程序开发