摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级下拉菜单</title> <script type="text/javascript" src="js/jq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
li{list-style: none;}
ul li{width: 150px;height: 40px;background: blue;float: left;margin: 1px;line-height: 40px;text-align: center;}
.two{position: relative;top: 0px;left: -1px;}
.three{position: absolute;left: 152px;top:0px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// 隐藏二三级菜单
$('.three').hide()
$('.two').hide()
// 移动到一级菜单显示二级菜单
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(200)
$(this).find('.two>li').css('background','green')
})
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(200)
})
// 移动到二级菜单显示三级菜单
$('.two>li').mouseover(function(){
$(this).find('.three').slideDown(200)
$(this).find('.three>li').css('background','red')
})
$('.two>li').mouseleave(function(){
$(this).find('.three').slideUp(200)
})
})
</script>
<ul>
<li>一级菜单1
<ul>
<li>二级菜单1
<ul>
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul> </li>
<li>二级菜单2
<ul>
<li>三级菜单11</li>
<li>三级菜单22</li>
<li>三级菜单33</li>
</ul></li>
<li>二级菜单3
<ul>
<li>三级菜单111</li>
<li>三级菜单222</li>
<li>三级菜单333</li>
</ul></li>
</ul> </li>
<li>一级菜单2
<ul>
<li>二级菜单1
<ul>
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul> </li>
<li>二级菜单2
<ul>
<li>三级菜单11</li>
<li>三级菜单22</li>
<li>三级菜单33</li>
</ul></li>
<li>二级菜单3
<ul>
<li>三级菜单111</li>
<li>三级菜单222</li>
<li>三级菜单333</li>
</ul></li>
</ul></li>
<li>一级菜单3
<ul>
<li>二级菜单1
<ul>
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul> </li>
<li>二级菜单2
<ul>
<li>三级菜单11</li>
<li>三级菜单22</li>
<li>三级菜单33</li>
</ul></li>
<li>二级菜单3
<ul>
<li>三级菜单111</li>
<li>三级菜单222</li>
<li>三级菜单333</li>
</ul></li>
</ul></li>
<li>一级菜单4
<ul>
<li>二级菜单1
<ul>
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul> </li>
<li>二级菜单2
<ul>
<li>三级菜单11</li>
<li>三级菜单22</li>
<li>三级菜单33</li>
</ul></li>
<li>二级菜单3
<ul>
<li>三级菜单111</li>
<li>三级菜单222</li>
<li>三级菜单333</li>
</ul></li>
</ul></li>
<li>一级菜单5
<ul>
<li>二级菜单1
<ul>
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul> </li>
<li>二级菜单2
<ul>
<li>三级菜单11</li>
<li>三级菜单22</li>
<li>三级菜单33</li>
</ul></li>
<li>二级菜单3
<ul>
<li>三级菜单111</li>
<li>三级菜单222</li>
<li>三级菜单333</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>
批改老师：查无此人批改时间：2019-04-03 13:23:03
老师总结：完成的不错。下次把代码缩进，看着整齐。继续加油。
