摘要：<html> <head> <title>jquery三级导航</title> <script src="js/jquery.js" type="text/javascript">&l
<html>
<head>
<title>jquery三级导航</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="#">文学</a> <i class="fa fa-angle-right"></i>
<ul class="secondM">
<li class="two"><a>文学1</a> <i class="fa fa-angle-right"></i>
<div class="three">
<p>文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1文学1</p>
</div>
</li>
<li class="two"><a>文学2</a> <i class="fa fa-angle-right"></i></li>
<li class="two"><a>文学3</a> <i class="fa fa-angle-right"></i>
<div class="three">
<p>文学3文学3文学3文学3文学3文学3文学3文学3</p>
</div>
</li>
<li class="two"><a>文学4</a> <i class="fa fa-angle-right"></i>
<div class="three">
<p>文学4文学4文学4文学4文学4文学4文学4文学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>
批改老师：查无此人批改时间：2019-04-27 17:33:42
老师总结：完成的不错，可以把常用的css样式写到一个文件，下次直接可以使用。继续加油
