========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;
}
2018-05-22
厲害兄弟