摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三级导航</title><script type="text/javascript" src="jquery-3.3.1.min.js"><
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0px ;padding: 0px;}
.top{width: 1200px;height: 36px;margin: 0px auto;margin-top: 60px;}
ul,li{list-style: none;}
ul li{width: 150px;height:36px;line-height: 36px;text-align: center;font-size: 16px;float: left;cursor: pointer;background-color: #f1f1f1;}
.one > li{border-right: 2px solid lightblue;}
.one > li:last-child{border-right: none;}
.tow{display: none;}
.tow > li{width: 150px;height: 36px;position: relative;border: 0px;border-top: 1px solid lightblue;}
.three {position: absolute; top: 0px;left: 150px;}
.three li {width: 150px;height: 36px;line-height: 36px;border: 0;border-top: 1px solid lightblue;}
.current{background-color: lightblue;font-weight: bold}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>产品介绍
<ul>
<li>新产品</li>
<li>拳头产品</li>
<li>实验产品</li>
</ul>
</li>
<li>新闻中心
<ul>
<li>公司新闻</li>
<li>行业新网</li>
<li>国家新闻
<ul>
<li>行业</li>
<li>军事</li>
<li>文娱</li>
</ul>
</li>
</ul>
</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.one>li').mouseover(function() {
$(this).find('.tow').slideDown(500)
})
$('.one>li').mouseout(function() {
$(this).find('.tow').slideUp(500)
})
$('.tow').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.tow').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</html>
老师为什么我的导航鼠标移上，动一下它就执行向下拉伸效果？
批改老师：灭绝师太批改时间：2019-03-18 16:57:04
老师总结：mouseover和mouseout在父元素和其子元素都可以触发,mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次
