<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>侧边导航条跟踪</title>
<style type="text/css">
*{margin:0;padding: 0;}
.container{
width: 100%;
height: 4043px;
background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) center top no-repeat;}
.nav{
width: 160px;
height: auto;
background: #ddd;
text-align: center;
position: fixed;
top: 50%;
margin-top: -103px;
cursor: pointer;
}
.nav-list1 li{
width: 100%;
height: auto;
line-height: 40px;
border-bottom: 1px solid #999;
list-style:none;
}
.nav-list2 li{
width: 100%;
height: 40px;
color: #fff;
}
.nav-list2{
width: 100%;
height: auto;
background: #aaa;
display: none;
position: relative;
}
.nav-list1 li:hover .nav-list2{
display: block;
}
.nav-list3{
width: 100%;
height: auto;
background: pink;
display: none;
position: absolute;
top: 0;
left: 160px;
}
.nav-list3 li{
width: 100%;
height: 40px;
color: #fff;
}
.nav-list1 li .nav-list2 li:hover .nav-list3{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div class="nav-list1">
<ul>
<li>侧边导航条
<div class="nav-list2">
<ul>
<li>二级栏目
<div class="nav-list3">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
<li>二级栏目
<div class="nav-list3">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
<li>二级栏目
<div class="nav-list3">
<ul>
<li>三级栏目</li>
<li>三级栏目</li>
<li>三级栏目</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>侧边导航条</li>
<li>侧边导航条</li>
<li>侧边导航条</li>
<li>侧边导航条</li>
</ul>
</div>
</div>
</div>
</body>
</html>SimonYangym
msidolphin