大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么用纯css3实现竖形无限级导航

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

创新互联公司专注于鄯善企业网站建设,响应式网站,商城建设。鄯善网站建设公司,为鄯善等地区提供建站服务。全流程按需定制开发,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

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

怎么用纯css3实现竖形无限级导航

实现的代码。

html代码:

代码如下:



       

           

                   
  • Menu 1
                       

                             
    • Submenu 1.1
                                 

                                       
      • Submenu 1.1.1

      •                                
      • Submenu 1.1.2
                                           

                                                 
        • Submenu 1.1.2.1

        •                                        
        • Submenu 1.1.2.2

        •                                    

                                       

      •                            

                             

    •                        
    • Submenu 1.2

    •                    

                   

  •                
  • Menu 2
                       

                             
    • Submenu 2.1

    •                        
    • Submenu 2.2

    •                    

                   

  •                
  • Menu 3
                       

                             
    • Submenu 3.1

    •                        
    • Submenu 3.2

    •                    

                   

  •            

       

   

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


分享标题:怎么用纯css3实现竖形无限级导航
当前URL:http://dzwzjz.com/article/pipdji.html
在线咨询
服务热线
服务热线:028-86922220
TOP