abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>垂直三級導航(jQuery)</title><link rel="stylesheet" href="../static
<!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>《穆斯林的葬禮》全會去污粉有仝進去污粉模塊 去污粉加餐 藝術(shù)團百共軛豐花樣百出莜</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;}
Correcting teacher：查無此人Correction time：2019-05-22 09:24:17
Teacher's summary：完成的不錯。每行js和jq語句結(jié)束增加;號。繼續(xù)加油