abstract：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{padding: 0;margin: 0;} ul li{cursor: pointer;} .top
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding: 0;margin: 0;}
ul li{cursor: pointer;}
.top_bar{height: 40px;width: 800px;background: #000000;margin: 50px auto;}
.box1 li{list-style: none;color: #FFFFFF;float: left;height: 40px;line-height: 40px;width: 100px;border-right: 1px solid #FFFFFF;text-align: center;background: #000000;}
.box2 li{position: relative;background: #2D2D2D;color: #A9A9A9;border: 0;}
.box2 li:hover{background: #000000;color: #FFFFFF;}
.box3{position: absolute;left: 100px;top:0px;}
</style>
<body>
<div class="top_bar">
<ul class="box1"> <!--一級菜單-->
<li>首頁</li>
<li>產(chǎn)品
<ul class="box2"> <!--二級下拉菜單-->
<li>產(chǎn)品1</li>
<li class="box22">產(chǎn)品2 <!-- 三級下拉菜單-->
<ul class="box3">
<li>產(chǎn)品2.1</li>
<li>產(chǎn)品2.2</li>
<li>產(chǎn)品2.3</li>
<li>產(chǎn)品2.4</li>
</ul>
</li>
<li class="box22">產(chǎn)品3
<ul class="box3">
<li>產(chǎn)品3.1</li>
<li>產(chǎn)品3.2</li>
<li>產(chǎn)品3.3</li>
<li>產(chǎn)品3.4</li>
</ul>
</li>
<li>產(chǎn)品4</li>
</ul>
</li>
<li>公司新聞
<ul class="box2">
<li>新聞1</li>
<li class="box22">新聞2
<ul class="box3">
<li>新聞2.1</li>
<li>新聞2.2</li>
<li>新聞2.3</li>
<li>新聞2.4</li>
</ul>
</li>
<li class="box22">新聞3
<ul class="box3">
<li>新聞3.1</li>
<li>新聞3.2</li>
<li>新聞3.3</li>
<li>新聞3.4</li>
</ul>
</li>
<li>新聞4</li>
</ul>
</li>
<li>行業(yè)新聞</li>
<li>聯(lián)系我們</li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
//find()找到當前元素集合中每個元素的后代
$(document).ready(function(){
$(".box2").hide()
$(".box3").hide()
// 鼠標劃過一級菜單時二級菜單滑出
// this指向當前鼠標劃過的對象
$(".box1>li").mouseover(function(){
$(this).find(".box2").slideDown(500)
})
// 鼠標離開一級菜單時二級菜單隱藏
$(".box1>li").mouseleave(function(){
$(this).find(".box2").slideUp(500)
})
//當鼠標移動到包含三級菜單的二級菜單時顯示當前三級菜單
$(".box22").mouseover(function(){
$(this).find(".box3").slideDown(500)
})
//當鼠標移出包含三級菜單的二級菜單時隱藏當前三級菜單
$(".box22").mouseleave(function(){
$(this).find(".box3").slideUp(500)
})
})
</script>
</body>
</html>
總結(jié)：find()方法找到當前元素集合中每個元素的后代
this指向當前鼠標劃過的對象
三級菜單相對于二級菜單對應的li定位，而不是相對于整個二級菜單
思路：先隱藏二級菜單和三級菜單
鼠標劃過一級菜單時二級菜單下滑顯示，劃出時二級菜單上滑隱藏
鼠標劃過帶有三級菜單的二級菜單時三級菜單下滑顯示，劃出時三級菜單上滑隱藏
Correcting teacher：滅絕師太Correction time：2018-11-21 13:54:28
Teacher's summary：完成的不錯，知識點掌握的比較好，繼續(xù)保持！