abstrakt：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
*{margin:0px;padding:0px;}
li{list-style-type: none;color:mintcream;background-color: mediumpurple;}
.ul1 li{float:left;width:80px;height:40px;text-align:center;line-height: 40px;font-size:15px;}
.ul3 li{position:relative;left:80px;top:-40px;}
li:hover{background-color:orchid;}
</style>
</head>
<body>
<nav style="margin:0 auto;width:60%;height:40px;background-color: #f5f5f5;">
<ul class="ul1">
<li>首頁</li>
<li>學(xué)習(xí)
<ul class="ul2">
<li>一年級</li>
<li>二年級</li>
<li>三年級</li>
<li>四年級
<ul class="ul3">
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
</li>
<li>五年級</li>
<li>六年級</li>
</ul>
</li>
<li>測試
<ul class="ul2">
<li>一年級</li>
<li>二年級</li>
<li>三年級</li>
<li>四年級
<ul class="ul3">
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
</li>
<li>五年級</li>
<li>六年級</li>
</ul>
</li>
<li>課外
<ul class="ul2">
<li>音樂</li>
<li>美術(shù)</li>
<li>信息</li>
<li>體育</li>
</ul>
</li>
</ul>
</nav>
<script>
$(document).ready(function(){
$('.ul2').hide();
$('.ul3').hide();
$('.ul1>li').mouseover(function(){
$(this).find('.ul2').slideDown(100)
})
$('.ul1>li').mouseleave(function(){
$(this).find('.ul2').slideUp(100)
})
$('.ul2>li').mouseover(function(){
$(this).find('.ul3').slideDown(100)
})
$('.ul2>li').mouseleave(function(){
$(this).find('.ul3').slideUp(100)
})
})
</script>
</body>
</html>
Korrigierender Lehrer：韋小寶Korrekturzeit：2019-02-11 09:14:07
Zusammenfassung des Lehrers：寫的很不錯 jQuery實現(xiàn)下拉導(dǎo)航要比js來實現(xiàn)的代碼少了很多，實際上css也可以來實現(xiàn)！