4-2 侧边栏导航跟随案例 请老师检查
来源：4-2 侧边栏导航跟随案例
写额外飞1
2018-01-10 15:55:09
问题一：给div2设置absolute定位。就必须要给div2的父元素或者祖辈元素设置relative定位。我的理解对吗？
问题二：我给一级标题设置的高度是5个一级标题和表框的和。有必要加上二级标题的高度吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
list-style:none;
}
.main{
width:100%;
height:4400px;
background:url("img/mooc.png") center top no-repeat;
}
.nav{
width:160px;
height:155px;
position:fixed;
left:0;
top:50%;
margin-top:-75px;
}
.nav_li{
width:100%;
height:auto;
position:relative;
}
.title{
width:100%;
height:30px;
background:black;
border-bottom:1px solid #fff;
color:#fff;
font-size:16px;
text-align:center;
line-height:30px;
}
.nav_li ul{
width:160px;
height:auto;
background:#666;
display:none;
}
.nav_li ul li{
width:160px;
height:40px;
line-height:40px;
text-align:center;
color:#ccc;
border-bottom:1px dashed black;
}
.nav_li:hover ul{
display:block;
}
.nav_li2{
width:160px;
height:auto;
position:absolute;
left:160px;
top:30px;
display:none;
}
.nav_li2 ul{
width:160px;
height:auto;
background:black;
}
.nav_li2 ul li{
width:160px;
height:40px;
line-height:40px;
color:#fff;
border:1px solid gray;
text-align:center;
}
.nav_li ul li:hover .nav_li2{
display:block;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="nav">
<div class="nav_li">
<div class="title">慕课网一级标题</div>
<ul>
<li>
二级标题
<div class="nav_li2">
<ul>
<li>三级标题</li>
<li>三级标题</li>
<li>三级标题</li>
</ul>
</div>
</li>
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</div>
<div class="nav_li">
<div class="title">慕课网一级标题</div>
<ul>
<li>二级标题
<div class="nav_li2">
<ul>
<li>三级标题</li>
<li>三级标题</li>
<li>三级标题</li>
</ul>
</div></li>
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</div>
<div class="nav_li">
<div class="title">慕课网一级标题</div>
<ul>
<li>二级标题
<div class="nav_li2">
<ul>
<li>三级标题</li>
<li>三级标题</li>
<li>三级标题</li>
</ul>
</div></li>
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</div>
<div class="nav_li">
<div class="title">慕课网一级标题</div>
<ul>
<li>二级标题
<div class="nav_li2">
<ul>
<li>三级标题</li>
<li>三级标题</li>
<li>三级标题</li>
</ul>
</div></li>
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</div>
<div class="nav_li">
<div class="title">慕课网一级标题</div>
<ul>
<li>二级标题
<div class="nav_li2">
<ul>
<li>三级标题</li>
<li>三级标题</li>
<li>三级标题</li>
</ul>
</div></li>
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
问题一：根据代码情况设置，absolute定位是针对离自己最近的父元素设置有定位（除了static定位）的元素进行定位。如父元素都没设置定义，以浏览器左上角进行定位。
问题二：给一级标题设置高度不用加上二级标题的高度。
希望对你有帮助，动手实践，加油。
0
