<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>7.侧边栏导航跟随案例</title>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">慕课网的标题1</div>
<ul>
<li>
二级栏目1
<div class="list-3">
<div class="list-3Dom">三级栏目-1</div>
<div class="list-3Dom">三级栏目-1</div>
<div class="list-3Dom">三级栏目-1</div>
</div>
</li>
</ul>
<ul>
<li>二级栏目1
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目1</div>
<div class="list-3Dom">三级栏目1</div>
</div>
</li>
</ul>
<ul>
<li>二级栏目1
<div class="list-3">
<div class="list-3Dom">三级栏目1</div>
<div class="list-3Dom">三级栏目1</div>
<div class="list-3Dom">三级栏目1</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">慕课网的标题2
<ul>
<li>二级栏目1</li>
</ul>
<ul>
<li>二级栏目1</li>
</ul>
<ul>
<li>二级栏目1</li>
</ul>
</div>
<div class="nav-li">慕课网的标题3
<ul>
<li>二级栏目3</li>
</ul>
<ul>
<li>二级栏目3</li>
</ul>
<ul>
<li>二级栏目3</li>
</ul>
</div>
<div class="nav-li">慕课网的标题4
<ul>
<li>二级栏目4</li>
</ul>
<ul>
<li>二级栏目4</li>
</ul>
<ul>
<li>二级栏目4</li>
</ul>
</div>
</div>
</div>
</body>
<style>
*{
padding:0px;
margin:0px;
}
.page{
width: 100%;
height:4043px;
background:skyblue;
}
.nav{
width:160px;
height: 205px;
height:auto;
position: fixed;
left:0px;
top:50%;
margin-top:-103px;
font-family: 'Miscrosoft YaHei';
}
/* 一级菜单样式 */
.nav-li{
width:160px;
height:auto ;
border-bottom:1px solid #fff;
background: #333;
text-align:center;
line-height:40px;
color:#fff;
font-size:16px;
cursor: pointer;/*改变指针形状，说明是可被点击的 */
}
.nav-li:hover ul{
display:block;
}
.tit{
width: 160px;
height: 40px;
}
/* 二级菜单样式 */
.nav-li ul{
width: 160px;
height:auto;
background: #fff;
display: none;
}
.nav-li ul li{
width:160px;
height: 40px;
border-bottom:1px dashed rosybrown;/*虚线dashed */
color:#333;
text-align:c enter;
line-height: 40px;
position:relative;
}
.nav-li ul li:hover .list-3{
display: block;
}
/* 三级菜单样式 */
.list-3{
width: 160px;
height: auto;
position: absolute;
left: 160px;
top:0px;
display: none;
}
.list-3Dom{
width: 160px;
height: 40px;
background: #444;
border-bottom: 1px solid #fff;/*底边:solid*/
text-align:center;
line-height: 40px;
color: #fff;
}
</style>
</html>
/*三级栏目：三级栏目要做定位处理，但凡涉及位置的移动给元素添加定位属性，如果用absolute属性其父级必定要添加定位属性*/
