abstract：<!DOCTYPE html><html> <head> <title>jQuery三级下拉菜单——课后作业</title> <style type="text/css"> *{padding:0;margin:0;} &
<!DOCTYPE html>
<html>
<head>
<title>jQuery三级下拉菜单——课后作业</title>
<style type="text/css">
*{padding:0;margin:0;}
/*一级菜单*/
.navMenu {width:570px;margin:0 auto;margin-top: 50px;}
.navMenu ul li{float: left;position: relative;}
li{list-style: none;background-color: #eee;width: 140px;height: 40px;text-align: center;margin-right: 2px;margin-bottom: 2px;}
ul li a{line-height: 40px;text-align: center;font-size: 20px;color: #000;text-decoration: none;display: block;padding:0 10px;}
/*二级菜单*/
.navMenu ul li ul {display: none;position:absolute;left: 0;top:0;margin-top:42px;}
.navMenu ul li ul li{float:none;}
/*三级菜单*/
.navMenu ul li ul li ul{display: none;left:140px;top:-42px;}
</style>
</head>
<body>
<div class="navMenu">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">HTML中文网</a>
<ul>
<li><a href="#">HTML教程</a></li>
<li><a href="#">HTML5入门</a></li>
<li><a href="#">HTML5手册</a></li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">CSS样式</a></li>
<li><a href="#">CSS选择器</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">JS DOM</a></li>
<li><a href="#">JS 对象</a></li>
<li><a href="#">JS Window</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">视频课程</a>
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后端</a></li>
<li><a href="#">数据库</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">学习手册</a>
<ul>
<li><a href="#">php学习手册</a></li>
<li><a href="#">Python学习手册</a></li>
</ul>
</li>
<li><a href="#">参考书籍</a>
<ul>
<li><a href="#">php参考书</a></li>
<li><a href="#">Python参考书</a></li>
</ul>
</li>
<li><a href="#">工具箱</a></li>
</ul>
</li>
<li><a href="#">帮助</a>
<ul>
<li><a href="#">联系客服</a></li>
<li><a href="#">技术支持</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").has("ul").mouseover(function(){
$(this).children("ul").css("display","block");
$(this).css("backgroundColor","#79D236");
}).mouseout(function () {
$(this).children("ul").css("display","none");
$(this).css("backgroundColor","#eee");
})
})
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-04-09 11:08:13
Teacher's summary：以后, 像这样的三级或无限级的菜单设计 , 都是通过事件来驱动的, 都要使用js脚本