jq三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.nav{
width: 500px;
height: 50px;
margin: 0px auto;
}
ul li{
width: 50px;height: 50px;line-height: 50px;
text-align: center; float: left;
position:relative; background: blue;
margin-top: -19px;}
.nav_2 li{
width: 50px;height: 50px;line-height: 50px ;
margin-top: 2px; }
ul{list-style: none; }
</style>
<script>
$(document).ready(function(){
$('.nav_2').hide()
$('.nav_3').hide()
//移上显示
$('.nav_1>li').mouseover(function(){
$(this).find('.nav_2').slideDown(500)
})
//移出
$('.nav_1>li').mouseleave(function(){
$(this).find('.nav_2').slideUp(500)
})
//移上显示
$('.nav_2').mouseover(function(){
$(this).find('.nav_3').slideDown(500)
})
$('.nav_2').mouseleave(function(){
$(this).find('.nav_3').slideUp(500)
})
})
</script>
</head>
<body>
<div>
<ul><!-- 一级 -->
<li>首页</li>
<li>一级
<ul>
<li>二级
<ul>
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li> 二级</li>
</ul>
</li>
</ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>语法比较好理解，先把二级，三级菜单用hide()方法隐藏。当鼠标移上去使用slideDown显示(slideUp/隐藏)。