三级下拉菜单案例
总结心得，以前做导航总不想给li宽度想靠margin padding来调节，抠破头了。最后好好把老师的代码拿来学习。原来给高度宽度这么好弄。收获了。
虽然基本雷同，但知识点不一样，给过不？
知识点：
<!-- hide()隐藏 slideUp()上滑隐藏 -->
<!-- show()显示 slideDown()下滑显示 -->
<!-- find() 方法获得当前元素集合中每个元素的后代 -->
<!-- cursor:改变鼠标移上去的样式 -->
·
<!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() 方法获得当前元素集合中每个元素的后代 -->
<!-- cursor:改变鼠标移上去的样式 -->
</head>
<body>
<script>
$(function(){
//隐藏二级菜单
$('.mt_1').c
//隐藏三级菜单
$('.mth_1').hide()
/* //鼠标移上时，显示二级菜单
$('.moe_2').mouseover(function(){
$('.mt_1').show()
}) */
//当鼠标移动到包含二级菜单的一级菜单时，显示当前二级菜单
$('.mo_1>li').mouseover(function(){
$(this).find('.mt_1').show()
})
//当鼠标离开包含二级菜单的一级菜单时，隐藏当前二级菜单
$('.mo_1>li').mouseout(function(){
$(this).find('.mt_1').hide()
})
//当鼠标移动到包含三级菜单的二级菜单时，显示当前三级菜单
$('.mt_1>li').mouseover(function(){
$(this).find('.mth_1').show()
})
//当鼠标离开包含三级菜单的二级菜单时，隐藏当前三级菜单
$('.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">产品
<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">行业</li>
<li class="moe_1">客服</li>
</ul>
</div>
</body>
</html>