jquery 三级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-3.4.0.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.menu{ width:800px; height:35px; margin:0px; background:#2d2d2d;color:#fff; border:1px solid #ccc; border-radius:5px; margin-top:20px;}
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;}
.twobox li{ width:100px; height:30px; line-height:30px; background-color:pink; position:relative; border:0px}
.twobox li:hover{background:#000;color:#fff;}
.three {position:absolute;top:0px; left:100px }
.three li{ width:99px; height:30px; line-height:30px; border:0;}
</style>
</head>
<body>
<script type="text/javascript">
//放入javascript代码或者jQuery代码
//文档就绪函数
$(document).ready(function() {
$(".twobox").hide();
$(".three").hide();
$(".onebox>li").mouseover(
function(){
$(this).find(".twobox").slideDown(500);
}
);
$(".onebox>li").mouseleave(
function(){
$(this).find(".twobox").slideUp(500);
}
);
$(".twobox>li").mouseover(
function(){
$(this).find(".three").slideDown(500);
}
);
$(".twobox>li").mouseleave(
function(){
$(this).find(".three").slideUp(500);
}
);
});
</script>
<div class="menu">
<ul class="onebox"><!--一级菜单-->
<li >首页</li>
<li >产品
<ul class="twobox">
<li>产品1</li>
<li class="two">产品2
<ul class="three">
<li>产品2.1</li>
<li>产品2.2</li>
<li>产品2.3</li>
</ul>
</li>
<li>产品3
<ul class="three">
<li>产品3.1</li>
<li>产品3.2</li>
<li>产品3.3</li>
</ul>
</li>
</ul>
</li>
<li>关于我们</li>
<li>联系我们</li>
<li>公司新闻</li>
<li>公司地址</li>
</ul>
</div>
</body>
</html>