侧边导航栏为何三级栏目无法显示?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position定位综合运用</title>
<style type="text/css">
*{padding:0;margin:0;}
.one{width:100%;height:4043px;background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) center top no-repeat;position:relative;}
.two{width:200px;height:400px;background:url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png) no-repeat;position:fixed;right:0px;top:50%;margin-top:-100px;}
.three{width:160px;height:205px;position:fixed;left:0px;top:50%;margin-top:-103px;font-family:微软雅黑;}
.for{width:160px;height:auto;border-bottom:1px solid #fff;background: #333;text-align:center;line-height:40px;color:#FFF;font-size:16px;cursor:pointer;}
.tit{width:160px;height: 40px;}
.for:hover ul{display: block;}
.for ul{width:160px;height: auto;background: #FFF;display:none;}
.for ul li{width: 160px;height:40px;border-bottom:1px dashed #666;text-align: center;line-height: 40px;color:#333;position:relative;}
.for ul li:hover .list3{display:block;}
.list3{width: 160px;height: auto;position:absolute;left:160px;top:0px;display:none;}
.list3Dom{width: 160px;height: 40px background:#444;border-bottom:1px solid #FFF;text-align:center;line-height: 40px;color:#FFF;}
</style>
</head>
<body>
<div class="one">
<div class="three">
<div class="for">
<div class="tit">慕课网的标题</div>
<ul>
<li>
二级栏目
<div class="list3">
<div class="list3Dom">三级栏目</div>
<div class="list3Dom">三级栏目</div>
<div class="list3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
<div class="for">慕课网的标题
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
<div class="for">慕课网的标题
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
<div class="for">慕课网的标题
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
<div class="for">慕课网的标题
<ul>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul></div>
</div>
</div>
<div class="two"></div>
</body>
</html>
正在回答
三级栏目显示出来了呀,只不过你只给第一个二级栏目设置了3级栏目的内容,所以只有第一个有效果,其他的不行
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星