摘要：知识点（1）展开下级菜单时使用$(this).find()方法，仅查找当前对象下级目标，否则所有下级会全部展开。$('.lv2>li').mouseover(function(){ $(this).find('.lv3').slideDown(500) })（2）鼠标移开上级目录，下级菜单收起，使用mousele
知识点
（1）展开下级菜单时使用$(this).find()方法，仅查找当前对象下级目标，否则所有下级会全部展开。
$('.lv2>li').mouseover(function(){
$(this).find('.lv3').slideDown(500)
})（2）鼠标移开上级目录，下级菜单收起，使用mouseleave()方法。
$('.lv2>li').mouseleave(function(){
$(this).find('.lv3').slideUp(500)
})难点处理
问题：ul li设置浮动后，顶层div的border-radius以及background-color无法显示
处理：在div与列表之间添加一个div，并清除浮动。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery三级导航</title>
<script src="js/jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0px 0px; padding: 0px 0px;}
ul{list-style: none;}
.menu{width: 1000px; height: 30px; margin: 0px auto; border-radius: 5px; background-color: #0055CC; color: #FFFFFF;}
.clear{clear: both;}
.menu>ul>li{float: left; border-right: 1px solid white;}
ul li{width: 150px; line-height: 30px; text-align: center; }
.lv1 li{font-size: 18px;}
.lv2 li{position: relative; color: #CCCCCC; background-color: royalblue;}
.lv3{position: absolute; left: 150px; top: 0px;}
.lv2 li:hover{color: white; background-color: #0055CC;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.lv3').hide()
$('.lv2>li').mouseover(function(){
$(this).find('.lv3').slideDown(500)
})
//$(this).find(),仅查找当前对象下的目标,否则会全部生效
$('.lv2>li').mouseleave(function(){
$(this).find('.lv3').slideUp(500)
})
$('.lv2').hide()
$('.lv1>li').mouseover(function(){
$(this).find('.lv2').slideDown(500)
})
$('.lv1>li').mouseleave(function(){
$(this).find('.lv2').slideUp(500)
})
})
</script>
</head>
<body>
<div class="menu">
<div class="clear"></div>
<ul class="lv1">
<li>首页</li>
<li>产品
<ul class="lv2">
<li>产品1</li>
<li>产品2
<ul class="lv3">
<li>产品2.1</li>
<li>产品2.2</li>
<li>产品2.3</li>
</ul>
</li>
<li>产品3
<ul class="lv3">
<li>产品3.1</li>
<li>产品3.2</li>
<li>产品3.3</li>
</ul>
</li>
<li>产品4</li>
</ul>
</li>
<li>公司新闻
<ul class="lv2">
<li>公司新闻1</li>
<li>公司新闻2</li>
<li>公司新闻3</li>
</ul>
</li>
<li>行业新闻</li>
<li>联系我们
<ul class="lv2">
<li>邮箱</li>
<li>电话</li>
<li>地图</li>
</ul>
</ul>
</div>
</body>
</html>END
批改老师：韦小宝批改时间：2018-11-16 16:35:42
老师总结：嗯！不错！很完整！课后还要多多练习啊！！继续加油吧！
