摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
*{margin:0px;padding:0px;}
li{list-style-type: none;color:mintcream;background-color: mediumpurple;}
.ul1 li{float:left;width:80px;height:40px;text-align:center;line-height: 40px;font-size:15px;}
.ul3 li{position:relative;left:80px;top:-40px;}
li:hover{background-color:orchid;}
</style>
</head>
<body>
<nav style="margin:0 auto;width:60%;height:40px;background-color: #f5f5f5;">
<ul class="ul1">
<li>首页</li>
<li>学习
<ul class="ul2">
<li>一年级</li>
<li>二年级</li>
<li>三年级</li>
<li>四年级
<ul class="ul3">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</li>
<li>五年级</li>
<li>六年级</li>
</ul>
</li>
<li>测试
<ul class="ul2">
<li>一年级</li>
<li>二年级</li>
<li>三年级</li>
<li>四年级
<ul class="ul3">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</li>
<li>五年级</li>
<li>六年级</li>
</ul>
</li>
<li>课外
<ul class="ul2">
<li>音乐</li>
<li>美术</li>
<li>信息</li>
<li>体育</li>
</ul>
</li>
</ul>
</nav>
<script>
$(document).ready(function(){
$('.ul2').hide();
$('.ul3').hide();
$('.ul1>li').mouseover(function(){
$(this).find('.ul2').slideDown(100)
})
$('.ul1>li').mouseleave(function(){
$(this).find('.ul2').slideUp(100)
})
$('.ul2>li').mouseover(function(){
$(this).find('.ul3').slideDown(100)
})
$('.ul2>li').mouseleave(function(){
$(this).find('.ul3').slideUp(100)
})
})
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-11 09:14:07
老师总结：写的很不错 jQuery实现下拉导航要比js来实现的代码少了很多，实际上css也可以来实现！
