慕慕3942110
2018-05-17 17:47
========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; }
厉害兄弟
css定位 position
49043 学习 · 92 问题
相似问题