abstrakt：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三級下拉菜單 </title> <script type="text/javascript"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三級下拉菜單 </title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{margin: 0;padding: 0;}
div{width: 400px;height: 40px;line-height: 40px;margin: 20px auto 0;background: rgba(50,50,150,0.6);border-radius: 20px;color:white;}
div>ul>li:hover{background: rgba(50,50,150,0.9);}
ul li{float: left;width: 100px;text-align: center;cursor: pointer;}
ul{list-style: none;}
a{text-decoration: none;color:white;}
.twobox{display: none;}
.twobox li{position: relative;width: 100px;height: 30px;line-height: 30px;background: rgba(50,150,50,0.6);color: white;}
.twobox li:hover{background: rgba(50,150,50,0.8);}
.three{position: absolute;left: 100px;top:0;
background: rgba(50,150,50,0.2);display: none;}
.three li{width: 100px;height: 25px;line-height: 25px;}
</style>
</head>
<body>
<div>
<ul class="one">
<li><a href="">首頁</a></li>
<li>產(chǎn)品
<ul class="twobox">
<li class="two">水果
<ul class="three">
<li>蘋果</li>
<li>榴蓮</li>
<li>葡萄</li>
<li>火龍果</li>
</ul>
</li>
<li class="two">花卉
<ul class="three" >
<li>玫瑰</li>
<li>菊花</li>
<li>滿天星</li>
</ul>
</li>
<li>服裝</li>
<li>動物</li>
</ul>
</li>
<li>新聞</li>
<li>圖片</li>
</ul>
</div>
</body>
<script>
$(function(){
// $('.twobox').hide();
$('.one>li').hover(function(){
$(this).find('.twobox').slideDown(100)
},function(){$(this).find('.twobox').slideUp(100)})
$('.two').hover(function(){$(this).find('.three').fadeIn(300)},function(){$(this).find('.three').fadeOut(300)})
})
</script>
</html>
0-------------效果圖------------------
總結：
1、應在css中設置二級和三級菜單項隱藏，老師的代碼在加載的時候能閃現(xiàn)二級三級菜單，原因在于用jquery來做初始化的隱藏
2、可以直接用$(選擇器).hover(操作一，操作二)來實現(xiàn)移上和移除的效果
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-04-14 21:19:15
Zusammenfassung des Lehrers：你的思路是對的, 但是要實現(xiàn)淡入淡出的效果, 還得加點其它東西的,想一想?