jquery三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三级下拉菜单</title>
<script type="text/javascript" src="../jquery-3.3.1.js" ></script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.one{
width: 600px;
height: 30px;
border: 1px solid black;
}
.one li{
float: left;
margin-left: 10px;
background-color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//隐藏二级与三级下拉菜单
$('.twobox,.threebox').hide();
//当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单
$('.one>li').mouseover(function () {
$(this).find('.twobox').slideDown(500);
});
//当鼠标移出包含二级菜单的一级菜单时隐藏当前的二级菜单
$('.one>li').mouseleave(function () {
$(this).find('.twobox').slideUp(500);
});
//当鼠标移动到包含三级菜单的二级菜单是显示当前三级菜单
$('.twobox>li').mouseover(function () {
$(this).find('.threebox').slideDown(500);
});
//当鼠标移出包含三级菜单的二级菜单时隐藏当前三级菜单
$('.twobox>li').mouseleave(function () {
$(this).find('.threebox').slideUp(500);
});
});
</script>
<ul class="one">
<li>首页</li>
<li>
产品
<ul class="twobox">
<li>1</li>
<li>2</li>
<li>
3
<ul class="threebox">
<li>55</li><br />
<li>55</li><br />
<li>55</li><br />
<li>55</li><br />
<li>55</li>
</ul>
</li>
<li>4</li>
</ul>
</li>
<li>
联系我们
</li>
<li>
公司简介
<ul class="twobox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
产品介绍
</li>
<li>
售前咨询
</li>
</ul>
</body>
</html>