jQuery实现垂直三级下拉导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直三级导航(jQuery)</title>
<link rel="stylesheet" href="../static/css/style1.css">
<link rel="stylesheet" href="../static/font-awesome/css/font-awesome.min.css">
<script src="../static/js/jquery.js"></script>
<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>
</head>
<body>
<ul class="nav">
<li class="one" style="background: #be1616;"><a href="" style="margin-right: 8px;">图书</a></li>
<li class="one"><a href="">文学<i class="fa fa-angle-right"></i></a>
<ul>
<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>
<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>
</body>
</html>
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: 0px;border-left: 1px solid #5a5a5a;border-right: 1px solid #5a5a5a;}
.two {width: 150px;height: 45px;line-height: 45px;text-align: center;float: left;background: #323232;border-bottom: 1px solid #5a5a5a;color:#fff;}
.two:hover{background: #be1616;}
.three{width: 300px;color: #fff;background: #333333;padding: 10px 20px;position: absolute;left: 151px;top: 0px;}
p{text-indent: 2rem;line-height: 20px;text-align: left;}