用css3过渡简易实现三级菜单

用css3过渡简易实现三级菜单

简单的写了一下，没有各种阴影、圆角的修饰，供初学者一点思路。

1. 搭建容器

    <ul class="box">
           <li><a href="">一级导航</a> 
               <ul class="box1">
                   <li><a href=""> 二级导航</a>
                       <ul class="box2">
                           <li>三级导航</li>
                           <li>三级导航</li>
                           <li>三级导航</li>
                           <li>三级导航</li>
                       </ul>
                   </li>
                   <li><a href=""> 二级导航</a>
                       <ul class="box2">
                           <li>三级导航</li>
                           <li>三级导航</li>
                           <li>三级导航</li>
                           <li>三级导航</li>
                       </ul>
                   </li>
                  
               </ul>
           </li>
          
       </ul>
   

2. 菜单ul的样式修饰：
   显示对所有li的修饰，宽、高、背景色、文字居中、行高，对一级标签的li进行左浮动，横向排列

   	li{line-height:50px;background-color: #000;list-style: none;text-align:center;width:160px;height:50px;color: #fff;} 
           a{text-decoration:none;color:#fff;}
           .box{margin:100px auto;width:862px;height:52px;}
           .box>li{position: relative;float:left;}
   

3. 二级三级菜单ul的样式修饰
   二级菜单默认是隐藏状态，用绝对定位的方式（相对于一级菜单）将二级菜单定位在top:50px;left:0;的位置上、三级菜单也是隐藏状态，用绝对定位的方式（相对于二级菜单）将三级菜单定位在left:160;的位置上、用opacity这是透明级别为0、用transition制作一个过度显示和隐藏的效果

    .box1{position: absolute;top:50px;width:160px;opacity: 0;height: 0;visibility: hidden;transition:all 0.5s linear;}
            .box2{position: absolute;left:160px;visibility:hidden;opacity: 0;transition:all 0.5s linear;}
   

4. 当鼠标移动到一级菜单栏的时候二级菜单栏显示,移动到一级菜单栏的时候二级菜单栏显示

     .box li:hover .box1{opacity:1;visibility: visible;margin:0;}
     .box1 li:hover .box2{opacity:1;visibility: visible;margin:0;}
   

5.介绍一下visibility属性
visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。

值	描述
visible	默认值。元素是可见的。