abstrakt：<!DOCTYPE html><html> <head> <title>jQuery三級(jí)下拉菜單——課后作業(yè)</title> <style type="text/css"> *{padding:0;margin:0;} &
<!DOCTYPE html>
<html>
<head>
<title>jQuery三級(jí)下拉菜單——課后作業(yè)</title>
<style type="text/css">
*{padding:0;margin:0;}
/*一級(jí)菜單*/
.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;}
/*二級(jí)菜單*/
.navMenu ul li ul {display: none;position:absolute;left: 0;top:0;margin-top:42px;}
.navMenu ul li ul li{float:none;}
/*三級(jí)菜單*/
.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中文網(wǎng)</a>
<ul>
<li><a href="#">HTML教程</a></li>
<li><a href="#">HTML5入門</a></li>
<li><a href="#">HTML5手冊(cè)</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 對(duì)象</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="#">數(shù)據(jù)庫(kù)</a></li>
</ul>
</li>
<li><a href="#">學(xué)習(xí)中心</a>
<ul>
<li><a href="#">學(xué)習(xí)手冊(cè)</a>
<ul>
<li><a href="#">php學(xué)習(xí)手冊(cè)</a></li>
<li><a href="#">Python學(xué)習(xí)手冊(cè)</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="#">聯(lián)系客服</a></li>
<li><a href="#">技術(shù)支持</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>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-04-09 11:08:13
Zusammenfassung des Lehrers：以后, 像這樣的三級(jí)或無限級(jí)的菜單設(shè)計(jì) , 都是通過事件來驅(qū)動(dòng)的, 都要使用js腳本