页面中常见垂直三级导航
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>页面中常见的垂直三级导航 (jquery)</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<script src="static/js/jquery.js"></script>
</head>
<body>
<ul class="nav">
<li class="one" style="background: #be1616;"><a href="" style="margin-right: 10px;">图书</a></li>
<li class="one"><a href="">文学 <i class="fa fa-angle-right"></i></a>
<ul>
<li class="two" style="border-top: 1px solid #5a5a5a;">穆斯林的葬礼<i class="fa fa-angle-right"></i>
<div class="three">
<p>
《穆斯林的葬礼》是霍达创作的一部长篇小说，该小说以回族手工匠人梁亦清的玉器作坊奇珍斋升沉起伏为主线，
在历史的背景下描写梁家三代人不同的命运变迁，表现了主人公为追求理想和事业，为完善自身素质所发出的蓬勃不息的命运意识。
</p>
</div>
</li>
<li class="two">穆斯林的葬礼<i class="fa fa-angle-right"></i>
<div class="three">
<p>
《穆斯林的葬礼》是霍达创作的一部长篇小说，该小说以回族手工匠人梁亦清的玉器作坊奇珍斋升沉起伏为主线，
在历史的背景下描写梁家三代人不同的命运变迁，表现了主人公为追求理想和事业，为完善自身素质所发出的蓬勃不息的命运意识。
</p>
</div>
</li>
<li class="two">穆斯林的葬礼<i class="fa fa-angle-right"></i></li>
<li class="two">穆斯林的葬礼<i class="fa fa-angle-right"></i></li>
</ul>
</li>
<li class="one"><a href="">漫画 <i class="fa fa-angle-right"></i></a></li>
<li class="one"><a href="">小说 <i class="fa fa-angle-right"></i></a></li>
<li class="one"><a href="">杂志 <i class="fa fa-angle-right"></i></a></li>
</ul>
<script>
$(function(){
$('.two,.three').hide()
$('li.one:eq(1)').mouseover(function(){
$(this).find('.two').slideDown(300)
})
$('li.one:eq(1)').mouseleave(function(){
$(this).find('.two').hide(300)
})
$('li.two').mouseover(function(){
$(this).find('.three').slideDown(300)
})
$('li.two').mouseleave(function(){
$(this).find('.three').hide()
})
})
</script>
</body>
</html>
style.css:
*{
margin:0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.nav{
width: 150px;
height: 700px;
background:#323232;
margin-top: 10px;
margin-left: 100px;
}
.nav .one{
height: 45px;
line-height: 45px;
text-align: center;
border-bottom: 1px solid #5a5a5a;
position: relative;
}
.nav .one i{
float: right;
margin-right: 8px;
margin-top: 15px;
}
.nav .one:hover{
background:#be1616;
}
.nav .one ul{
position: absolute;
left: 150px;
top: -1px;
border-left: 1px solid #5a5a5a;
border-right: 1px solid #5a5a5a;
}
.two{
width: 150px;
height: 45px;
line-height: 45px;
float: left;
text-align: center;
border-bottom: 1px solid #5a5a5a;
background:#323232;
color: #fff;
}
.two:hover{
background:#be1616;
}
.three{
width: 300px;
color: #fff;
background: #323232;
padding: 10px 20px;
position: absolute;
left: 151px;
top: 0px;
}
p{
text-indent: 2em;
line-height: 20px;
text-align: left;
}定位的时候一定要细心
使用绝对定位的时候,定位的参照元素是包含定位属性的父元素
使用相对定位,依然是文档中的元素,元素的显示位置和元素所在
文档中其他元素相互关联