abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery垂直三级导航</title> <script src="http://code.jquery.com/jquery-3.4.1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery垂直三级导航</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
.nav {
width: 150px;
height: 700px;
background: #232323;
margin-top: 10pxl;
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: #009688;
}
.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: #232323;
color: #fff;
}
.two:hover {
background: #009688;
}
.three {
width: 300px;
background: #232323;
color: #fff;
padding: 10px 20px;
position: absolute;
left: 151px;
top: 0px;
}
p {
text-indent: 2em;
line-height: 20px;
text-align: left;
}
</style>
<script>
$(document).ready(function () {
$('.two, .three').hide();
$('li.one').mouseover(function () {
$(this).find('.two').slideDown(300);
});
$('li.one').mouseleave(function () {
$(this).find('.two').slideUp(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:#009688;"><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>Pragmatic Appropriateness Strategy in Interrogative Speech& Taking the Interrogative Sentence
in Muslim's Funeral Chapter XIV "Moonset" as an Example</p>
</div>
</li>
<li class="two">穆斯林葬礼 <i class="fa fa-angle-right"></i>
<div class="three">
<p>666666666666666666666666666666666666666666666666666666666666666666666</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>
<ul>
<li class="two" style="border-top:1px solid #5a5a5a;">穆斯林葬礼 <i class="fa fa-angle-right"></i>
<div class="three">
<p>Pragmatic Appropriateness Strategy in Interrogative Speech& Taking the Interrogative Sentence
in Muslim's Funeral Chapter XIV "Moonset" as an Example</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>
</ul>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-16 09:37:52
Teacher's summary：完成的不错。常用的css样式，可以单独写一个公用文件。继续加油。
