非常好用的下拉
通过这次作业明白很多。尤其是mouseout与mouseleave的差别，很明显的提现了出来。回头我必须再写两遍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq三级下拉</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.menu{margin:0 auto;height: 30px;width:500px;}
ul{list-style:none;}
ul li{height:30px;width:100px;line-height:30px;text-align:center;float:left;border:1px solid #1495E7;color:#333;}
.ul_two li{position: relative;}
.ul_three{position: absolute; top:0px;left: 100px}
.ul_three li{height: 30px;width: 100px;line-height: 30px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.ul_two').hide()
$('.ul_three').hide()
$('.li_one').mouseover(function(){
$(this).find('.ul_two').slideDown(500)
})
$('.li_one').mouseleave(function(){
$(this).find('.ul_two').slideUp(500)
})
$('.li_two').mouseover(function(){
$(this).find('.ul_three').slideDown(500)
})
$('.li_two').mouseleave(function(){
$(this).find('.ul_three').slideUp(500)
})
})
</script>
<div>
<ul>
<li>首页</li>
<li>一年级
<ul>
<li>二年级1班</li>
<li>二年级2班
<ul>
<li>三年级1班</li>
<li>三年级2班</li>
<li>三年级3班</li>
</ul>
</li>
<li>二年级3班</li>
</ul>
</li>
<li>公告</li>
</ul>
</div>
</body>
</html>