摘要：總結(jié)心得，以前做導(dǎo)航總不想給li寬度想靠margin padding來調(diào)節(jié)，摳破頭了。最后好好把老師的代碼拿來學(xué)習(xí)。原來給高度寬度這么好弄。收獲了。雖然基本雷同，但知識點不一樣，給過不？知識點：<!-- hide()隱藏 slideUp()上滑隱藏 --><!-- show()顯示 slideDown()下滑顯示 --><!-- find()
總結(jié)心得，以前做導(dǎo)航總不想給li寬度想靠margin padding來調(diào)節(jié)，摳破頭了。最后好好把老師的代碼拿來學(xué)習(xí)。原來給高度寬度這么好弄。收獲了。
雖然基本雷同，但知識點不一樣，給過不？
知識點：
<!-- hide()隱藏 slideUp()上滑隱藏 -->
<!-- show()顯示 slideDown()下滑顯示 -->
<!-- find() 方法獲得當(dāng)前元素集合中每個元素的后代 -->
<!-- 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>三級菜單下滑效果</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)前元素集合中每個元素的后代 -->
<!-- cursor:改變鼠標(biāo)移上去的樣式 -->
</head>
<body>
<script>
$(function(){
//隱藏二級菜單
$('.mt_1').c
//隱藏三級菜單
$('.mth_1').hide()
/* //鼠標(biāo)移上時，顯示二級菜單
$('.moe_2').mouseover(function(){
$('.mt_1').show()
}) */
//當(dāng)鼠標(biāo)移動到包含二級菜單的一級菜單時，顯示當(dāng)前二級菜單
$('.mo_1>li').mouseover(function(){
$(this).find('.mt_1').show()
})
//當(dāng)鼠標(biāo)離開包含二級菜單的一級菜單時，隱藏當(dāng)前二級菜單
$('.mo_1>li').mouseout(function(){
$(this).find('.mt_1').hide()
})
//當(dāng)鼠標(biāo)移動到包含三級菜單的二級菜單時，顯示當(dāng)前三級菜單
$('.mt_1>li').mouseover(function(){
$(this).find('.mth_1').show()
})
//當(dāng)鼠標(biāo)離開包含三級菜單的二級菜單時，隱藏當(dāng)前三級菜單
$('.mt_1>li').mouseout(function(){
$(this).find('.mth_1').hide()
})
})
</script>
<div class="menu">
<ul class="mo_1"> <!-- 一級菜單 -->
<li class="moe_1">首頁
</li>
<li class="moe_1">產(chǎn)品
<ul class="mt_1"> <!-- 二級菜單 -->
<li class="mte_1">商品1
<ul class="mth_1"> <!-- 三級菜單 -->
<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"> <!-- 三級菜單 -->
<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"> <!-- 三級菜單 -->
<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"> <!-- 二級菜單 -->
<li class="mte_1">商品1
<ul class="mth_1"> <!-- 三級菜單 -->
<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"> <!-- 三級菜單 -->
<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"> <!-- 三級菜單 -->
<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>
批改老師：韋小寶批改時間：2019-02-11 10:11:56
老師總結(jié)：不錯不錯 寫的很美觀 實際上下拉菜單不僅僅可以使用js來實現(xiàn) css也是可以的 總結(jié)的也很棒！