========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;
}
