abstrait：總結(jié)心得，以前做導(dǎo)航總不想給li寬度想靠margin padding來調(diào)節(jié)，摳破頭了。最后好好把老師的代碼拿來學(xué)習(xí)。原來給高度寬度這么好弄。收獲了。雖然基本雷同，但知識(shí)點(diǎn)不一樣，給過不？知識(shí)點(diǎn)：<!-- hide()隱藏 slideUp()上滑隱藏 --><!-- show()顯示 slideDown()下滑顯示 --><!-- find()
總結(jié)心得，以前做導(dǎo)航總不想給li寬度想靠margin padding來調(diào)節(jié)，摳破頭了。最后好好把老師的代碼拿來學(xué)習(xí)。原來給高度寬度這么好弄。收獲了。
雖然基本雷同，但知識(shí)點(diǎn)不一樣，給過不？
知識(shí)點(diǎn)：
<!-- hide()隱藏 slideUp()上滑隱藏 -->
<!-- show()顯示 slideDown()下滑顯示 -->
<!-- find() 方法獲得當(dāng)前元素集合中每個(gè)元素的后代 -->
<!-- cursor:改變鼠標(biāo)移上去的樣式 -->
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三級(jí)菜單下滑效果</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<style>
*{margin: 0px;padding:0px;}
ul{list-style: none;}
ul li {width: 100px;height: 35px;line-height: 35px;text-align: center;float: left;border-right: 1px solid #ccc;cursor: pointer;}
.menu{width: 100%;height: 35px;background: #ccc;margin: 0px auto;}
.mo_1{width: 900px;height: 35px;background:#888;margin:0px auto;border-radius: 17.5px;border: 1px solid ;color:#fff;}
.mt_1 li{background:#888;border-bottom: 1px solid seashell;position: relative;}
.mte_1{border-top: 1px solid seashell;}
.mth_1{position: absolute;top:0px;left: 101px;}
.mth_1 li{background:#888;border-bottom: 1px solid seashell;}
</style>
<!-- hide()隱藏 slideUp()上滑隱藏 -->
<!-- show()顯示 slideDown()下滑顯示 -->
<!-- find() 方法獲得當(dāng)前元素集合中每個(gè)元素的后代 -->
<!-- cursor:改變鼠標(biāo)移上去的樣式 -->
</head>
<body>
<script>
$(function(){
//隱藏二級(jí)菜單
$('.mt_1').c
//隱藏三級(jí)菜單
$('.mth_1').hide()
/* //鼠標(biāo)移上時(shí)，顯示二級(jí)菜單
$('.moe_2').mouseover(function(){
$('.mt_1').show()
}) */
//當(dāng)鼠標(biāo)移動(dòng)到包含二級(jí)菜單的一級(jí)菜單時(shí)，顯示當(dāng)前二級(jí)菜單
$('.mo_1>li').mouseover(function(){
$(this).find('.mt_1').show()
})
//當(dāng)鼠標(biāo)離開包含二級(jí)菜單的一級(jí)菜單時(shí)，隱藏當(dāng)前二級(jí)菜單
$('.mo_1>li').mouseout(function(){
$(this).find('.mt_1').hide()
})
//當(dāng)鼠標(biāo)移動(dòng)到包含三級(jí)菜單的二級(jí)菜單時(shí)，顯示當(dāng)前三級(jí)菜單
$('.mt_1>li').mouseover(function(){
$(this).find('.mth_1').show()
})
//當(dāng)鼠標(biāo)離開包含三級(jí)菜單的二級(jí)菜單時(shí)，隱藏當(dāng)前三級(jí)菜單
$('.mt_1>li').mouseout(function(){
$(this).find('.mth_1').hide()
})
})
</script>
<div class="menu">
<ul class="mo_1"> <!-- 一級(jí)菜單 -->
<li class="moe_1">首頁
</li>
<li class="moe_1">產(chǎn)品
<ul class="mt_1"> <!-- 二級(jí)菜單 -->
<li class="mte_1">商品1
<ul class="mth_1"> <!-- 三級(jí)菜單 -->
<li class="mthe_1">蜘蛛俠</li>
<li class="mthe_1">阿拉神燈</li>
<li class="mthe_1">如來佛祖</li>
<li class="mthe_1">齊天大圣</li>
</ul>
</li>
<li class="mte_2">商品2</li>
<li class="mte_3">商品3
<ul class="mth_1"> <!-- 三級(jí)菜單 -->
<li class="mthe_1">蜘蛛俠</li>
<li class="mthe_1">阿拉神燈</li>
<li class="mthe_1">如來佛祖</li>
<li class="mthe_1">齊天大圣</li>
</ul>
</li>
<li class="mte_4">商品4</li>
<li class="mte_5">商品5
<ul class="mth_1"> <!-- 三級(jí)菜單 -->
<li class="mthe_1">蜘蛛俠</li>
<li class="mthe_1">阿拉神燈</li>
<li class="mthe_1">如來佛祖</li>
<li class="mthe_1">齊天大圣</li>
</ul>
</li>
</ul>
</li>
<li class="moe_1">新聞
<ul class="mt_1"> <!-- 二級(jí)菜單 -->
<li class="mte_1">商品1
<ul class="mth_1"> <!-- 三級(jí)菜單 -->
<li class="mthe_1">蜘蛛俠</li>
<li class="mthe_1">阿拉神燈</li>
<li class="mthe_1">如來佛祖</li>
<li class="mthe_1">齊天大圣</li>
</ul>
</li>
<li class="mte_2">商品2</li>
<li class="mte_3">商品3
<ul class="mth_1"> <!-- 三級(jí)菜單 -->
<li class="mthe_1">蜘蛛俠</li>
<li class="mthe_1">阿拉神燈</li>
<li class="mthe_1">如來佛祖</li>
<li class="mthe_1">齊天大圣</li>
</ul>
</li>
<li class="mte_4">商品4</li>
<li class="mte_5">商品5
<ul class="mth_1"> <!-- 三級(jí)菜單 -->
<li class="mthe_1">蜘蛛俠</li>
<li class="mthe_1">阿拉神燈</li>
<li class="mthe_1">如來佛祖</li>
<li class="mthe_1">齊天大圣</li>
</ul>
</li>
</ul>
</li>
<li class="moe_1">行業(yè)</li>
<li class="moe_1">客服</li>
</ul>
</div>
</body>
</html>
Professeur correcteur：韋小寶Temps de correction：2019-02-11 10:11:56
Résumé du professeur：不錯(cuò)不錯(cuò) 寫的很美觀 實(shí)際上下拉菜單不僅僅可以使用js來實(shí)現(xiàn) css也是可以的 總結(jié)的也很棒！