老师，为什么我无论怎么设置，第三级菜单还是只显示一行？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav-contrain {
position: fixed;
left: 0;
top: calc(50% - 66px);
}
.nav-contrain ul,
.nav-contrain ul li,
.li-3 {
width: 120px;
line-height: 30px;
text-align: center;
}
.nav-contrain ul li,
.nav-3 {
display: none;
}
.nav-contrain ul {
height: auto;
border-bottom: 1px solid #FFFFFF;
background-color: black;
color: white;
}
.nav-contrain ul li {
height: auto;
border-bottom: 1px dashed black;
background-color: white;
color: black;
position: relative;
}
.nav-3 {
width: 120px;
height: auto;
}
.li-3 {
height: 30px;
border-bottom: 1px #ffffff;
background-color: black;
color: white;
position: absolute;
top: 0;
right: -120px;
}
.nav-contrain ul:hover li,
.nav-contrain ul li:hover .nav-3 {
display: block;
}
</style>
<title>Document</title>
</head>
<body>
<div class="nav-contrain">
<ul>一级标题
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
</ul>
<ul>一级标题
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
</ul>
<ul>一级标题
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
<li>二级标题
<div class="nav-3">
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
<div class="li-3">三级标题</div>
</div>
</li>
</ul>
</div>
</body>
</html>加不加包裹 .li-3的 .nav-3效果都是一样的，是哪里错了嘛？
55
收起
正在回答
3回答
对，不包裹的话没有办法实现让三级菜单整体定位，一个一个给li定位的话太麻烦了。祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星