代码写的有点乱，效果出来了，不知道写的怎么样，请老师帮忙看看
来源：4-2 侧边栏导航跟随案例
拖小夫
2019-08-12 12:53:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width:100%;
height:4043px;
background: url(mooc.png) center no-repeat;
position: relative;
}
.sbox{width: 160px;
border: 1px solid #ccc;
color: white;
position: fixed;
left:0;top: 50%;
margin-top: -103px;
}
.content{width: 160px;
text-align: center;
line-height: 40px;
background: #333;
}
.list4{width: 160px;
height:40px;
border-bottom: 1px dashed #fff;
background: #ccc;
display: none;
}
.content:hover .list4{display: block;}
.content:hover{background: black;}
.name{line-height: 40px;
border-bottom: 1px solid #fff;
}
.cont{width: 160px;
position: fixed;
left:162px;
margin-top: -40px;
}
.list4{width: 160px;
height: 40px;
}
.list4:hover{background: #333;}
.list2{width: 160px;
background: #fff;
color: black;
}
.list3{display: none;
line-height: 40px;
}
.list4:hover .list3{display: block;}
</style>
</head>
<body>
<div class="box">
<div class="sbox">
<div class="content">
<div class="name">标题</div>
<ul class="list1">
<li class="list4">一级标题
<div class="cont">
<ul class="list2">
<li class="list3">
二级标题
</li>
<li class="list3">
二级标题
</li>
</ul>
</div>
</li>
<li class="list4">一级标题
<div class="cont">
<ul class="list2">
<li class="list3">
二级标题
</li>
<li class="list3">
二级标题
</li>
</ul>
</div></li>
<li class="list4">一级标题
<div class="cont">
<ul class="list2">
<li class="list3">
二级标题
</li>
<li class="list3">
二级标题
</li>
</ul>
</div></li>
</ul>
</div>
<div class="content">
<div class="name">标题</div>
<ul class="list1">
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
</ul>
</div>
<div class="content">
<div class="name">标题</div>
<ul class="list1">
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
</ul>
</div>
<div class="content">
<div class="name">标题</div>
<ul class="list1">
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
</ul>
</div>
<div class="content">
<div class="name">标题</div>
<ul class="list1">
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
<li class="list4">一级标题</li>
</ul>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好,
老师运行了你的代码，效果是正确的，继续努力哦~
如果还有疑惑，可以在问答区再次提问，我们会继续为你解答的。
如果我的回答帮助了你欢迎采纳，祝学习愉快~
0
相似问题