侧边栏导航
请问老师我这个二级栏目旁边的小圆圈是什么。
这是我的代码，帮我看看有没有问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位总结</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.con{
width:100%;
height:4000px;
background:url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) top center no-repeat;
}
.li{
width:160px;
height:205px;
background:#FFFFFF;
border-bottom:1px solid #DC143C;
font-family:"微软雅黑";
position:fixed;
left:0;
top:50%;
margin-top:-103px;
text-align:center;
}
.prg{
width:160px;
height:auto;
border-bottom:1px solid #DC143C;
font-size:16px;
color:#DC143C;
line-height:40px;
}
.prg ul{
width:160px;
height:auto;
display:none;
cursor:pointer;
}
.prg ul li{
width:160px;
height:40px;
border-bottom:1px solid #FF7F50;
text-align:center;
background:#F0FFFF;
position:relative;
}
.prg:hover ul{
display:block;
}
.tit{
width:160px;
height:40px;
}
.li2{
width:160px;
height:auto;
position:absolute;
left:150px;
top:0;
display:none;
}
.prg ul li .li2{
display:block;
}
.prg2{
width:160px;
height:40px;
background:#FF7F50;
border-bottom:1px solid #DC143C;
text-align:center;
line-height:40px;
}
</style>
</head>
<body>
<div class="con">
<div class="li">
<div class="prg">
<div class="tit">慕课网导航栏</div>
<ul>
<li>二级栏目
<div class="li2">
<div class="prg2">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</div>
</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="prg">
<div class="tit">慕课网导航栏</div>
<ul>
<li>二级栏目
<div class="li2">
<div class="prg2">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="prg">
<div class="tit">慕课网导航栏</div>
<ul>
<li>二级栏目
<div class="li2">
<div class="prg2">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="prg">
<div class="tit">慕课网导航栏</div>
<ul>
<li>二级栏目
<div class="li2">
<div class="prg2">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="prg">
<div class="tit">慕课网导航栏</div>
<ul>
<li>二级栏目
<div class="li2">
<div class="prg2">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
</div>
</div>
</body>
</html>
正在回答
根据代码，三级菜单的应该在滑过二级菜单后，显示出来，建议调如下：
部分HTML:
<div class="prg"> <div class="tit">慕课网导航栏</div> <ul> <li>二级栏目 <div class="li2"> <ul> <li>三级栏目1</li> <li>三级栏目1</li> <li>三级栏目1</li> </ul> </div> </li> <li>二级栏目 <div class="li2"> <ul> <li>三级栏目2</li> <li>三级栏目2</li> <li>三级栏目2</li> </ul> </div> </li> <li>二级栏目 <div class="li2"> <ul> <li>三级栏目3</li> <li>三级栏目3</li> <li>三级栏目3</li> </ul> </div> </li> </ul> </div>
css样式：将 .prg ul li .li2 ｛｝调整如下：
.prg ul li:hover .li2 {
display: block;
}
希望解答你的疑惑，祝学习愉快。
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星