abstrak：<html> <head> <title>jquery三級導(dǎo)航</title> <script src="js/jquery.js" type="text/javascript">&l
<html>
<head>
<title>jquery三級導(dǎo)航</title>
<script src="js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
<style type="text/css">
*{ margin: 0; padding: 0}
ul{ list-style: none;}
a{ text-decoration: none; color: #fff;}
.nav{ width: 150px; height: 700px; margin-left: 100px; background-color: #323232;}
.one{ height: 45px; line-height: 45px; text-align: center; border-bottom:1px solid #ccc; position: relative;}
i{ color: #fff; float: right; margin-right: 8px; margin-top: 15px;}
.nav .one:hover{ background-color: #be1616}
.secondM{ position: absolute;left:150px; top:0;border-left: 1px solid #ccc;}
.two{width: 150px; height: 45px; line-height: 45px; background-color: #323232; border-bottom:1px solid #ccc;
text-align: center;}
.two:hover{background-color: #be1616}
.three {
width: 300px; color: #fff; background-color: #323232; padding: 5px 10px;
position: absolute;
left: 151px;top:0;}
p{ text-indent: 2em; line-height: 30px; text-align: left;}
</style>
<script type="text/javascript">
$(function(){
$(".two,.three").hide();
$("li.one:eq(1)").mouseover(function(){
$(this).find(".two").slideDown(500);
});
$("li.one:eq(1)").mouseleave(function(){
$(this).find(".two").hide(300);
});
$("li.two").mouseover(function(){
$(this).find(".three").slideDown(200);
});
$("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:10px;" >圖書</a> </li>
<li class="one"><a href="#">文學(xué)</a> <i class="fa fa-angle-right"></i>
<ul class="secondM">
<li class="two"><a>文學(xué)1</a> <i class="fa fa-angle-right"></i>
<div class="three">
<p>文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1文學(xué)1</p>
</div>
</li>
<li class="two"><a>文學(xué)2</a> <i class="fa fa-angle-right"></i></li>
<li class="two"><a>文學(xué)3</a> <i class="fa fa-angle-right"></i>
<div class="three">
<p>文學(xué)3文學(xué)3文學(xué)3文學(xué)3文學(xué)3文學(xué)3文學(xué)3文學(xué)3</p>
</div>
</li>
<li class="two"><a>文學(xué)4</a> <i class="fa fa-angle-right"></i>
<div class="three">
<p>文學(xué)4文學(xué)4文學(xué)4文學(xué)4文學(xué)4文學(xué)4文學(xué)4文學(xué)4</p>
</div>
</li>
</ul>
</li>
<li class="one"><a href="#">漫畫</a> <i class="fa fa-angle-right"></i></li>
<li class="one"><a href="#">小說</a> <i class="fa fa-angle-right"></i>
</li>
<li class="one"><a href="#">雜志</a> <i class="fa fa-angle-right"></i></li>
</ul>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-04-27 17:33:42
Rumusan guru：完成的不錯，可以把常用的css樣式寫到一個文件，下次直接可以使用。繼續(xù)加油