サマリー：<!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"> <!--一級(jí)菜單-->
<li>首頁</li>
<li>產(chǎn)品
<ul class="box2"> <!--二級(jí)下拉菜單-->
<li>產(chǎn)品1</li>
<li class="box22">產(chǎn)品2 <!-- 三級(jí)下拉菜單-->
<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()找到當(dāng)前元素集合中每個(gè)元素的后代
$(document).ready(function(){
$(".box2").hide()
$(".box3").hide()
// 鼠標(biāo)劃過一級(jí)菜單時(shí)二級(jí)菜單滑出
// this指向當(dāng)前鼠標(biāo)劃過的對(duì)象
$(".box1>li").mouseover(function(){
$(this).find(".box2").slideDown(500)
})
// 鼠標(biāo)離開一級(jí)菜單時(shí)二級(jí)菜單隱藏
$(".box1>li").mouseleave(function(){
$(this).find(".box2").slideUp(500)
})
//當(dāng)鼠標(biāo)移動(dòng)到包含三級(jí)菜單的二級(jí)菜單時(shí)顯示當(dāng)前三級(jí)菜單
$(".box22").mouseover(function(){
$(this).find(".box3").slideDown(500)
})
//當(dāng)鼠標(biāo)移出包含三級(jí)菜單的二級(jí)菜單時(shí)隱藏當(dāng)前三級(jí)菜單
$(".box22").mouseleave(function(){
$(this).find(".box3").slideUp(500)
})
})
</script>
</body>
</html>
總結(jié)：find()方法找到當(dāng)前元素集合中每個(gè)元素的后代
this指向當(dāng)前鼠標(biāo)劃過的對(duì)象
三級(jí)菜單相對(duì)于二級(jí)菜單對(duì)應(yīng)的li定位，而不是相對(duì)于整個(gè)二級(jí)菜單
思路：先隱藏二級(jí)菜單和三級(jí)菜單
鼠標(biāo)劃過一級(jí)菜單時(shí)二級(jí)菜單下滑顯示，劃出時(shí)二級(jí)菜單上滑隱藏
鼠標(biāo)劃過帶有三級(jí)菜單的二級(jí)菜單時(shí)三級(jí)菜單下滑顯示，劃出時(shí)三級(jí)菜單上滑隱藏
添削の先生：滅絕師太添削時(shí)間：2018-11-21 13:54:28
先生のまとめ：完成的不錯(cuò)，知識(shí)點(diǎn)掌握的比較好，繼續(xù)保持！