老师请检查一下作业！有三个问题烦请帮忙答疑一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0;}
html,body{width:100%;
height:100%;}
.webpage{width:100%;
height:2569px;
background:url(imooc.png) no-repeat top center;
}
.nav{width:160px;
height:205px;
position:fixed;
left:0;
top:50%;
margin-top:-103px;/*移动数值待定*/
font-family:"微软雅黑";}
.nav-li{width:160px;
height:auto;
border-bottom:1px solid #fff;
background-color:#333;
text-align:center;
line-height:40px;
color:#fff;
font-size:16px;
cursor:pointer;}
.title{width:160px;
height:40px;}
ul{width:100%;
height:auto;
display:none;
}
.nav-li:hover ul{display:block;}
ul li{width:100%;
height:40px;
border-bottom:1px gray solid;
background:#fff;
text-align:center;
line-height:40px;
color:#333;
position:relative;
}
ul li:hover .list-3{display:block;}
.list-3{width:100%;
height:auto;
display:none;
}
.list-3m{width:160px;
height:40px;
background:#fff;
border:1px dashed gray;
text-align:center;
line-height:40px;
color:green;
position:absolute;
top:0;
left:160px;
}
</style>
</head>
<body>
<div class="webpage">
<div class="nav">
<div class="nav-li"><div class="title">慕课网的导航</div>
<ul>
<li>二级栏目
<div class="list-3">
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list-3">
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list-3">
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
</div></li>
<li>二级栏目
<div class="list-3">
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
<div class="list-3m">三级栏目</div>
</div></li>
</ul>
</div>
<div class="nav-li"><div class="title">慕课网的导航</div><ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul></div>
<div class="nav-li"><div class="title">慕课网的导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul></div>
<div class="nav-li"><div class="title">慕课网的导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul></div>
<div class="nav-li"><div class="title">慕课网的导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul></div>
</div>
</div>
</body>
</html>第一个问题：二级目录用到<ul><li>...</li><ul>标签，为什么没有用到list-style-type：这个属性去除默认的小黑圆点；
第二个问题：各级栏目下面都添加了下划线，我想把这下划线两端缩进，该怎么操作啊？记得前面课程讲过的，记不得了。。。
第三个问题：我在二级栏目下面添加了三条三级栏目，可是最终展示的效果都只有一条是什么原因导致的呢？
问题比较多，麻烦了！
3
收起
正在回答
1回答
同学你好，关于同学的问题，解答如下：
1、没有使用list-style-type，但是在效果中也没有看到小黑点，原因是背景颜色是黑色，看不出来。
可以把背景颜色改为白色，字体都设置为黑色，再给类名为nav的元素设置margin-left值就可以看到小黑点了，如下图：
2、同学想实现是下方的效果吗？（以一级菜单为例，二级菜单三级菜单其他需要自己调整哦）
如果是的话，可参考下方代码：
3、测试同学提供的代码测试是有些问题的。从下图中可以看出三级栏目只显示一个。
原因是类名为list-3m的元素设置了定位，内容都叠在一块了。
建议：给类名为list-3的元素设置定位。
代码参考：
如果帮助到了你，欢迎采纳~祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星