abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery三级下拉菜单导航</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三级下拉菜单导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
*{margin:0px;padding: 0px;}
body{background: #fff;font-size:14px;}
ul{list-style: none;}
a{text-decoration: none; color: #aaa;}
.header{width:100%;height: 40px;background: #ccc;}
.header .nav{width: 960px;margin:0 auto;}
.nav .nav-1>li{float: left;background: #000; width: 158px;height: 38px;line-height: 40px;text-align: center;border: 1px solid #333;}
.nav .nav-2>li,.nav .nav-3>li{background: #000; width: 158px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #333;position: relative;color: #fff;}
.nav .nav-3{position: absolute;left:158px;top:0px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
//隐藏下级导航
$('.nav-2').hide();
$('.nav-3').hide();
//移动到某个元素上时，显示对应的下级菜单
$('.nav-1>li').mouseover(function(){
//向下淡出
//检查是否有下级菜单
$(this).find('.nav-2').slideDown(100);
})
//移出的时候收起
$('.nav-1>li').mouseleave(function(){
//向上淡出
$(this).find('.nav-2').slideUp(100);
})
//再下一级
$('.nav-2>li').mouseover(function(){
$(this).find('.nav-3').slideDown(100);
})
$('.nav-2>li').mouseleave(function(){
$(this).find('.nav-3').slideUp(100);
})
})
</script>
</head>
<body>
<div>
<div>
<ul>
<li><a href="#">HTML</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第四章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第五章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li>第一章</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Jquery</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Bootstrap</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第四章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第五章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Vue</a>
<ul>
<li>第一章
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>注意细节，获取的时候有时候忘记加.了，找了好久
Correcting teacher：查无此人Correction time：2019-01-04 15:25:34
Teacher's summary：我也看了好久，代码一多，就乱。不过功能都对的，继续加油。