4-2有3个疑惑
来源：4-2 侧边栏导航跟随案例
weibo_飞来云去_0
2017-07-23 14:58:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;
margin:0;}
.page{
width:100%;
height:4043px;
background:url(mooc.png) no-repeat center top;
}
.nav{
width:160px;
height:auto;
position:fixed;
left:0;
top:50%;
margin-top:-103px ;
font-family: 'microsoft yahei';
}
.nav-li{
width:160px;
height:auto;
border-bottom:1px solid #fff;
background:#333;
text-align:center;
line-height:40px;
color:#fff;
font-size:16px;
}
.tit{
width:160px;
height:40px;
}
.nav-li ul{
width:160px;
height:122px;
background:#fff;
display:none;
}
.nav-li ul li{
width:160px;
height:40px;
border-bottom:1px dashed #666;
color:#333;
text-align: center;
line-height: 40px;
cursor:pointer;
}
.tit2{
width:160px;
height:40px;
position:relative;
}
.nav-li ul ul {
width:160px;
height:auto;
background:black;
top:40px;
left:160px;
position:absolute;
}
.nav-li:hover ul{
display:block;
}
.list3{
width:160px;
height:40px;
color:#fff;
}
/*.list3{
color:#fff;
display: none;
}
.nav-li ul li:hover .list3{
display:block;
}*/
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">标题</div>
<ul>
<li>
<div class="tit2">二级栏目</div>
<ul >
<li class="list3">三级栏目</li>
<li class="list3">三级栏目</li>
<li class="list3">三级栏目</li>
</ul>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">标题</div>
<ul>
<li>
<div class="tit2">二级栏目</div>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">标题</div>
<ul>
<li>
<div class="tit2">二级栏目</div>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">标题</div>
<ul>
<li>
<div class="tit2">二级栏目</div>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">标题</div>
<ul>
<li>
<div class="tit2">二级栏目</div>
</li>
<li>
二级栏目
</li>
<li>
二级栏目
</li>
</ul>
</div>
</div>
</div>
</body>
</html>1、我在自己做三级栏目的时候使用的是ul li标签，可在给class为tit2的二级栏目设置relative后，3级列表需要top设为40px才能达到视频中的位置，为什么它的祖先元素选择了一级标题而不是二级栏目呢
2、二级栏目使用的无序列表默认前面无小圆点，等到三级栏目的时候，除非设置list-style-type为none，不然就默认显示每列前的空心圆
3、为何3级列表的文字颜色无法更改，像是继承了二级栏目就不能变了
4回答
-
你好，（1）如下图，tit2元素是三级标签的兄弟元素，并不是父级元素。所以设置定位时，无法以它为参考
（2）二级栏目不设置ist-style-type为none,也是会显示小圆点的，你这个效果中，实现效果上看不到，是因为紧挨左侧，视觉效果上被遮盖了，把.page元素改为以下形式，在去掉.nav元素中的left:0;属性，即可看到二级栏目的小圆点。
.page{ width:800px; height:4043px; background:url(mooc.png) no-repeat center top; margin-left:100px; }（3）3级列表的文字颜色，基础了二级栏目.nav-li ul li元素的字体颜色，color:#333;因嵌套的层级太多，直接设置 .list3时找不到该元素，可把他的父级添加上，例：.nav-li .list3。
祝学习愉快！
0h017-07-25 -
好帮手慕糖
2017-07-26
你好，可以这么认为的！祝学习愉快~
0 -
好帮手慕糖
2017-07-26
你好，关于你说的“所有的三级列表都以第一个标题作了偏移”。原因可参考下列代码，所有的三级标签，都设置了绝对定位，但是它的祖先元素.nav中有固定定位position:fixed;导致所有的三级标签，都相对于.nav定位，又所有的三级标签定位（定的位置，即top,left）都是一样的，导致所有的三级标签重合。
.nav-li ul ul { width:160px; height:auto; background:black; top:40px; left:160px; position:absolute; }另外，如下图，tit元素是三级标签父级父级的兄弟元素，所以tit元素添加了相对定位与三级标签没有关系。
建议：可给.nav-li ul添加相对定位。
祝学习愉快！
0h017-07-26 -
好帮手慕糖
2017-07-24
你好，这个是浏览器识别的时候，它们不是同一级别下的。你可以再次嵌套可ul（如下代码）；会发现这个的列表样式也不一样。一般情况下只会识别三级（即：嵌套3层ul）；这个我们用到的不多，一半我们使用ul li是都会设置列表样式不显示。有兴趣可以了解下；
<div class="nav-li"> <div class="tit">标题</div> <ul> <li> <div class="tit2">二级栏目</div> <ul > <li class="list3"> <ul> <li>fvdvghf</li> <li>fvdvghf</li> <li>fvdvghf</li> </ul> </li> <li class="list3">三级栏目</li> <li class="list3">三级栏目</li> </ul> </li> <li>二级栏目</li> <li>二级栏目</li> </ul> </div>
祝学习愉快！
0h017-07-24
相似问题