abstrakt：<!DOCMENT TYPE> <head> <title>課后練習(xí)-jQuery三級下拉菜單</title> <style type="text/css"> *{margin:0;padding:&nb
<!DOCMENT TYPE>
<head>
<title>課后練習(xí)-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前端開發(fā) +</a>
<ul>
<li><a href="#">Web開發(fā)基礎(chǔ) +</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="#">進(jìn)階課程</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開發(fā)</a> </li>
<li><a href="#">ThinkPHP +</a>
<ul>
<li><a href="#">開發(fā)基礎(chǔ) +</a>
<ul>
<li><a href="#">企業(yè)站點</a></li>
<li><a href="#">通用后臺</a></li>
<li><a href="#">API接口</a></li>
</ul>
</li>
<li><a href="#">微信小程序 +</a>
<ul>
<li><a href="#">企業(yè)微網(wǎng)站</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>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-03-19 15:50:38
Zusammenfassung des Lehrers：三級下拉菜單, 重要在于對css中的定位的理解上, 一要有一個參考物