                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /css定位 position

我写的三级菜单，和老师的稍微有出入，要学习的可以看看（评论里面写不了这么多字，才过来的）

========html============
<div class="nav">

  <ul class='nav-list'>

   <li><a href="#">一级菜单</a>

    <ul class='nav-list nav-2list'>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a>

      <ul class='nav-list nav-3list'>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

      </ul>

     </li>

    </ul>

   </li>

   <li><a href="#">一级菜单</a></li>

   <li><a href="#">一级菜单</a></li>

   <li><a href="#">一级菜单</a></li>

   <li><a href="#">一级菜单</a>

    <ul class='nav-list nav-2list'>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a></li>

     <li><a href="#">2级菜单</a>

      <ul class='nav-list nav-3list'>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

       <li><a href="#">3级菜单</a></li>

      </ul>

     </li>

    </ul>

   </li>

  </ul>

 </div>

=====================css===========================
*{

 padding: 0;

 margin: 0;

}

.nav{

 width:160px;

 height:auto;

 position: fixed;

 left:0;

 top:20%; 

}

body{

 background-color:#ddd;

 height: 4000px;

}

.nav-list li{

 list-style: none;

}

.nav-list li a{

 color: #ddd;

 text-decoration: none;

 display: inline-block;

 width:160px;

 height:40px;

 line-height: 40px;

 padding: 3px;

 margin: 1px;

 text-align: center;

 background-color: #1c1f21;

 border-bottom: 2px solid white;

}

.nav-list li:hover .nav-2list{

 display: block;

}

.nav-2list, .nav-3list{

 display:none;

 

}

.nav-2list li{

 position: relative;

}

.nav-2list li a{

 background-color: #aaa

}

.nav-list li a:hover, .nav-list li a:active{

 background-color: red

}

.nav-2list li:hover .nav-3list{

 display: block;

}

.nav-3list{

 position: absolute;

 left: 164px;

 top:0px;

}