我写的三级菜单，和老师的稍微有出入，要学习的可以看看（评论里面写不了这么多字，才过来的）
来源：4-2 侧边栏导航跟随案例
慕慕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;
}
写回答
关注
1回答
-
- qq_惠州坆_0
- 2018-05-22 17:25:51
厉害兄弟
css定位 position
老师带你了解CSS中定位的知识，并运用到实际案例中。
49044 学习 · 92 问题
相似问题