摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航与下拉菜单</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></s
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航与下拉菜单</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
.menu{width: 80%;height: 40px;border: 1px;background: #2F3E45;margin: 50px 50px;}
ul li{width: 100px;height: 35px;line-height: 40px;text-align: center;float: left;border-right: 1px solid #2F3E45;color: white;background: #2F3E45;cursor: pointer;}
.sub1{width: 100px;height: 35px;line-height: 35px;background:#2F3E45;position: relative;border: 0px;}
.sub1 li:hover{background: red;}
.sub3 li{width: 100px;height: 35px;line-height: 35px;border: 0px;}
.sub3{position: absolute;top: 0px;left: 100px;}
</style>
<script>
$(document).ready(function(){
//隐藏二级与三级菜单
$('.sub1').hide()
$('.sub3').hide()
//.sub之下的li标签hover 显示二级与三级菜单
$('.one>li').mouseover(function(){
//找到所有类sub2 显示出来 时间500ms
$(this).find('.sub2').slideDown(500)
})
//鼠标移出隐藏二级
$('.one>li').mouseleave(function(){
$(this).find('.sub2').slideUp(500)
})
//鼠标hover二级菜单显示三级菜单
$('.two').mouseleave(function(){
//在当前类下.sub2找到.sub3然后执行下滑显示三级菜单
$(this).find('.sub3').slideDown(500)
})
//鼠标移出二级菜单隐藏三级
$('.two').mouseleave(function(){
$(this).find('.sub3').slideUp(600)
})
})
</script>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>电气电子
<ul><!-- 电气电子二级菜单 -->
<li>环球电气</li>
<li>工业继电器
<ul><!-- 三级菜单 -->
<li>固态继电器</li>
<li>时间继电器</li>
<li>控制继电器</li>
</ul>
</li>
<li>直流固态继电器</li>
</ul>
</li>
<li>工业开关
<ul> <!-- 工业开关二级菜单 -->
<li>微动开关</li>
<li>行程开关</li>
</ul>
</li>
<li>自动控制</li>
</ul>
</div>
</body>
</html>
批改老师：查无此人批改时间：2019-01-11 16:03:38
老师总结：做的不错，之后的作业可以加上你写代码的思路，这样老师可以给你更好的建议，继续加油。
