摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級下拉菜單</title> <script src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級下拉菜單</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.nav{
width: 500px;
height: 50px;
margin: 0px auto;
}
ul li{
width: 50px;height: 50px;line-height: 50px;
text-align: center; float: left;
position:relative; background: blue;
margin-top: -19px;}
.nav_2 li{
width: 50px;height: 50px;line-height: 50px ;
margin-top: 2px; }
ul{list-style: none; }
</style>
<script>
$(document).ready(function(){
$('.nav_2').hide()
$('.nav_3').hide()
//移上顯示
$('.nav_1>li').mouseover(function(){
$(this).find('.nav_2').slideDown(500)
})
//移出
$('.nav_1>li').mouseleave(function(){
$(this).find('.nav_2').slideUp(500)
})
//移上顯示
$('.nav_2').mouseover(function(){
$(this).find('.nav_3').slideDown(500)
})
$('.nav_2').mouseleave(function(){
$(this).find('.nav_3').slideUp(500)
})
})
</script>
</head>
<body>
<div>
<ul><!-- 一級 -->
<li>首頁</li>
<li>一級
<ul>
<li>二級
<ul>
<li>三級</li>
<li>三級</li>
<li>三級</li>
</ul>
</li>
<li> 二級</li>
</ul>
</li>
</ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>語法比較好理解，先把二級，三級菜單用hide()方法隱藏。當鼠標移上去使用slideDown顯示(slideUp/隱藏)。
批改老師：滅絕師太批改時間：2018-11-08 14:33:08
老師總結：實際操作的時候只要邏輯搞清楚了，還是非常簡單的，繼續(xù)加油