为什么我的三级目录不能挤到二级目录里?

为什么我的三级目录不能挤到二级目录里?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
.nav{
width:160px;
height:auto;
position:fixed;
left:0;
top:50%;
margin-top:-101px;
font-family:"microsoft yahei";
}
.nav-li{
width:160px;
background:#333;
color:#fff;
height:auto;
line-height:40px;
font-size:16px;
border:0.5px solid #fff;
text-align:center;
}
.tit{
width:160px;
height:40px;
}
li{
width:160px;
height:40px;
text-align: center;
line-height:40px;
background:#fff;
color:#333;
border-bottom:1px dashed #333;
}
ul{display:none;}
.nav-li:hover ul{display:block;}
.li-3{
width:160px;
height:auto;
}
.li-3dom{
width:160px;
height:40px;
text-align:center;
line-height:40px;
background:#333;
color:#fff;
border-bottom:1px solid #333;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-li">
<div class="tit">慕课网导航</div>
<ul>
<li>
二级栏目
<div class="li-3">
<div class="li-3dom">三级栏目</div>
<div class="li-3dom">三级栏目</div>
<div class="li-3dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">慕课网导航</div>
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
<div class="nav-li">
<div class="tit">慕课网导航</div>
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
<div class="nav-li">
<div class="tit">慕课网导航</div>
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
<div class="nav-li">
<div class="tit">慕课网导航</div>
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
</div>
</body>
</html>

为什么我的三级目录不能像讲师的视频中演示的那样  讲二级目录覆盖    反而是二级目录将三级目录覆盖了呢?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

http://img1.sycdn.imooc.com/climg//59476f920001460207540132.jpg

把这个背景颜色去掉就可以了。

小丸子爱吃菜 2017-06-19 11:51:20

三级目录的父元素.li-3,是要设置定位的,可以将课程中老师的源码下载下来再看下。

这是课程中案例三级目录的设置:

http://img1.sycdn.imooc.com/climg//59474a1d00015cac03340248.jpg

祝学习愉快!

  • 提问者 学东西要快 #1
    谢谢老师答复 但老师没正面回答我的问题 后面设置定位我已经试过是没有任何问题的,能达到和视频中一样的效果 但是在设置定位之前 三级目录的内容应该是能覆盖(或者说是顶替)住二级目录的内容的呀 就像是视频13:14秒的时候显示的那样 可我的却是二级目录盖住了三级目录
    2017-06-19 12:36:23
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师