摘要：*{margin: 0px;padding: 0px;} ul{list-style: none;} a{text-decoration: none;color:#fff;} .nav{width: 150px;height: 700px;background: #323232;margin-top: 10px;ma
*{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 .fot{height: 45px;line-height: 45px;text-align: center;border-bottom: 1px solid #5a5a5a;position: relative;}
.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;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;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按鈕內(nèi)容選擇</title>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="static/images/icon.ico" />
<link rel="stylesheet" type="text/css" href="static/style2.css">
<script type="text/javascript" src="static/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('.two,.three').hide()
$('li.one').mouseover(function(){
$(this).find('.two').slideDown(300)
})
$('li.one').mouseleave(function(){
$(this).find('.two').hide(300)
})
$('li.two').mouseover(function(){
$(this).find('.three').slideDown()
})
$('li.two').mouseleave(function(){
$(this).find('.three').hide()
})
})
</script>
</head>
<body>
<ul class="nav">
<li class="fot" style="background-color: #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">穆斯林的葬禮<i class="fa fa-angle-right"></i>
<div class="three">
<p>是霍達創(chuàng)作的一部長篇小說，該小說以回族手工匠人梁亦清的玉器作坊奇珍齋升沉起伏為主線，在歷史的背景下描寫梁家三代人不同的命運變遷，表現(xiàn)了主人公為追求理想和事業(yè)，為完善自身素質(zhì)所發(fā)出的蓬勃不息的命運意識。</p>
</div>
</li>
<li class="two">白鹿原<i class="fa fa-angle-right"></i>
<div class="three">
<p>《白鹿原》是作家陳忠實的代表作，這部長篇小說共50余萬字，由陳忠實歷時六年創(chuàng)作完成。</p>
</div>
</li>
<li class="two">開到荼糜<i class="fa fa-angle-right"></i>
<div class="three">
<p>這是一段純潔的記憶,曾經(jīng)有個微胖的女生扎著馬尾在學校的轉(zhuǎn)角處,曾經(jīng)有讓你心動的男孩走過你的窗前,沒有人能夠拒絕心底最柔情和最初的呼喚。</p>
</div>
</li>
<li class="two">基督山伯爵<i class="fa fa-angle-right"></i>
<div class="three">
<p>《基督山伯爵》是通俗歷史小說，法國著名作家大仲馬（1802-1870）的代表作。故事講述19世紀法國皇帝拿破侖“百日王朝”時期，法老號大副愛德蒙·鄧蒂斯受船長委托</p>
</div>
</li>
</ul>
</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>是霍達創(chuàng)作的一部長篇小說，該小說以回族手工匠人梁亦清的玉器作坊奇珍齋升沉起伏為主線，在歷史的背景下描寫梁家三代人不同的命運變遷，表現(xiàn)了主人公為追求理想和事業(yè)，為完善自身素質(zhì)所發(fā)出的蓬勃不息的命運意識。</p>
</div>
</li>
<li class="two">白鹿原<i class="fa fa-angle-right"></i>
<div class="three">
<p>《白鹿原》是作家陳忠實的代表作，這部長篇小說共50余萬字，由陳忠實歷時六年創(chuàng)作完成。</p>
</div>
</li>
<li class="two">開到荼糜<i class="fa fa-angle-right"></i>
<div class="three">
<p>這是一段純潔的記憶,曾經(jīng)有個微胖的女生扎著馬尾在學校的轉(zhuǎn)角處,曾經(jīng)有讓你心動的男孩走過你的窗前,沒有人能夠拒絕心底最柔情和最初的呼喚。</p>
</div>
</li>
<li class="two">基督山伯爵<i class="fa fa-angle-right"></i>
<div class="three">
<p>《基督山伯爵》是通俗歷史小說，法國著名作家大仲馬（1802-1870）的代表作。故事講述19世紀法國皇帝拿破侖“百日王朝”時期，法老號大副愛德蒙·鄧蒂斯受船長委托</p>
</div>
</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>
</ul>
</body>
</html>本章復習了之前學到的hide()，slideDown()，還有find(),垂直三級導航功能還是不錯的，也可以用到水平導航上，還是要多練習，避免后期忘了
批改老師：查無此人批改時間：2018-12-27 09:27:41
老師總結(jié)：做的非常好。 <a href="" 這里a標簽的跳轉(zhuǎn)，不要為空，可以這樣寫。<a href="javascript:void(0);" >