老师，我有一个问题
来源：4-2 侧边栏导航跟随案例
张艳华zzz
2019-01-02 01:40:48
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
<style type="text/css">
*{margin:0;padding: 0;}
.cont{
width: 100%;
height: 4033px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat center top;
}
.main{
width:100%;
height:205px;
position:fixed;
top:50%;
margin-top:-103px;
}
.one{
width:160px;
height:auto;
background:#ccc;
border-bottom:1px solid #fff;
text-align:center;
line-height:40px;
color:white;
font-size:16px;
}
.one ul{
width:160px;
height:auto;
background:#666;
display:none;
}
.one:hover ul{
display:block;
}
.one ul li{
width:160px;
height:40px;
line-height:40px;
text-align:center;
font-size:16px;
border-bottom:1px dashed red;
position:relative;
}
.one-list{
width:160px;
height:40px;
}
.list{
position:absolute;
left:160px;
top:0;
display:none;
}
.one ul li:hover .list{
display:block;
}
.list-3{
width:160px;
height:40px;
line-height: 40px;
text-align:center;
font-size:16px;
border-bottom:1px dashed orange;
background:#888;
}
</style>
</head>
<body>
<div class="cont">
<div class="main">
<div class="one">
<div class="one-list">慕课网标题</div>
<ul>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="one">
<div class="one-list">慕课网标题</div>
<ul>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="one">
<div class="one-list">慕课网标题</div>
<ul>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="one">
<div class="one-list">慕课网标题</div>
<ul>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="one">
<div class="one-list">慕课网标题</div>
<ul>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list">
<div class="list-3">三级栏目</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
3回答
-
同学你好，这里是因为紧挨着左侧，被遮盖了，建议：可以给one添加一个左外边距，调整下距左侧的距离，鼠标移入的时候，是会发现的哦。
不过因为字体是白色的，所以圆点也是白色的，在白色背景的时候，不容易显示，如下，灰色背景这个还是可以看见的。也可以换个其他颜色查看下哦。
希望能帮助到你，欢迎采纳。
祝学习愉快！
0 -
张艳华zzz
提问者
2019-01-02
是因为设置了li文档水平垂直居中的原因吗？然后圆点就自动消失了？
0 -
张艳华zzz
提问者
2019-01-02
ul是无序列表，然后为什么我没有设置list-type：none；无序列表前面的实心圆点也没了啊，我自己练习的时候也是没有出现，视频里教程也没有设置去掉无序列表前面的圆点，然后显示效果就没有圆点。
0
相似问题