サマリー：index.html: <!DOCTYPE html> <html lang="en"> <head> <title>頁面中常見的垂直三級導航 (jquery)</title> <link rel="stylesheet" href="
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>
《穆斯林的葬禮》是霍達創(chuàng)作的一部長篇小說，該小說以回族手工匠人梁亦清的玉器作坊奇珍齋升沉起伏為主線，
在歷史的背景下描寫梁家三代人不同的命運變遷，表現(xiàn)了主人公為追求理想和事業(yè)，為完善自身素質(zhì)所發(fā)出的蓬勃不息的命運意識。
</p>
</div>
</li>
<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></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;
}定位的時候一定要細心
使用絕對定位的時候,定位的參照元素是包含定位屬性的父元素
使用相對定位,依然是文檔中的元素,元素的顯示位置和元素所在
文檔中其他元素相互關聯(lián)
添削の先生：查無此人添削時間：2019-03-18 09:31:20
先生のまとめ：完成的不錯。 js每行語句后面都增加 ;號。 繼續(xù)加油。