abstrait：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>導航與下拉菜單</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></s
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導航與下拉菜單</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
.menu{width: 80%;height: 40px;border: 1px;background: #2F3E45;margin: 50px 50px;}
ul li{width: 100px;height: 35px;line-height: 40px;text-align: center;float: left;border-right: 1px solid #2F3E45;color: white;background: #2F3E45;cursor: pointer;}
.sub1{width: 100px;height: 35px;line-height: 35px;background:#2F3E45;position: relative;border: 0px;}
.sub1 li:hover{background: red;}
.sub3 li{width: 100px;height: 35px;line-height: 35px;border: 0px;}
.sub3{position: absolute;top: 0px;left: 100px;}
</style>
<script>
$(document).ready(function(){
//隱藏二級與三級菜單
$('.sub1').hide()
$('.sub3').hide()
//.sub之下的li標簽hover 顯示二級與三級菜單
$('.one>li').mouseover(function(){
//找到所有類sub2 顯示出來 時間500ms
$(this).find('.sub2').slideDown(500)
})
//鼠標移出隱藏二級
$('.one>li').mouseleave(function(){
$(this).find('.sub2').slideUp(500)
})
//鼠標hover二級菜單顯示三級菜單
$('.two').mouseleave(function(){
//在當前類下.sub2找到.sub3然后執(zhí)行下滑顯示三級菜單
$(this).find('.sub3').slideDown(500)
})
//鼠標移出二級菜單隱藏三級
$('.two').mouseleave(function(){
$(this).find('.sub3').slideUp(600)
})
})
</script>
</head>
<body>
<div>
<ul>
<li>首頁</li>
<li>電氣電子
<ul><!-- 電氣電子二級菜單 -->
<li>環(huán)球電氣</li>
<li>工業(yè)繼電器
<ul><!-- 三級菜單 -->
<li>固態(tài)繼電器</li>
<li>時間繼電器</li>
<li>控制繼電器</li>
</ul>
</li>
<li>直流固態(tài)繼電器</li>
</ul>
</li>
<li>工業(yè)開關
<ul> <!-- 工業(yè)開關二級菜單 -->
<li>微動開關</li>
<li>行程開關</li>
</ul>
</li>
<li>自動控制</li>
</ul>
</div>
</body>
</html>
Professeur correcteur：查無此人Temps de correction：2019-01-11 16:03:38
Résumé du professeur：做的不錯，之后的作業(yè)可以加上你寫代碼的思路，這樣老師可以給你更好的建議，繼續(xù)加油。