摘要：<!DOCMENT TYPE> <head> <title>课后练习-jQuery三级下拉菜单</title> <style type="text/css"> *{margin:0;padding:&nb
<!DOCMENT TYPE>
<head>
<title>课后练习-jQuery三级下拉菜单</title>
<style type="text/css">
*{margin:0;padding: 0;}
li{list-style:none;}
.top-nav {font-size:12px;font-weight:700;}
.top-nav li {float:left;list-style:none;margin-right:1px;}
.top-nav li a {line-height:30px;text-decoration:none;background:#ddd;color:#666;display:block;width:160px;text-align:center;}
.top-nav li a:hover {background:#800;color:#fff;}
.top-nav ul {list-style:none;display:none;width:160px;padding:0;position:relative;}
.top-nav li ul li ul {position:absolute;top:0;left:160px;}
</style>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$(".top-nav li").hover(function() {
$(this).has("ul").children("ul").fadeIn();
},
function() {
$(this).has("ul").children("ul").hide();
});
});
</script>
</head>
<body>
<ul class="top-nav">
<li><a href="#">Web前端开发 +</a>
<ul>
<li><a href="#">Web开发基础 +</a>
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">进阶课程</a>
<ul>
<li><a href="#">Layui</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">ECMAScript</a></li>
</ul>
</li>
<li><a href="#">选修课程</a></li>
</ul>
</li>
<li><a href="#">PHP开发</a> </li>
<li><a href="#">ThinkPHP +</a>
<ul>
<li><a href="#">开发基础 +</a>
<ul>
<li><a href="#">企业站点</a></li>
<li><a href="#">通用后台</a></li>
<li><a href="#">API接口</a></li>
</ul>
</li>
<li><a href="#">微信小程序 +</a>
<ul>
<li><a href="#">企业微网站</a></li>
<li><a href="#">微商城</a></li>
</ul>
</li>
<li><a href="#">PHP安全</a></li>
</ul>
</li>
<li><a href="#">Laravel</a></li>
</ul>
</body>
</html>
批改老师：天蓬老师批改时间：2019-03-19 15:50:38
老师总结：三级下拉菜单, 重要在于对css中的定位的理解上, 一要有一个参考物
