三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级下拉</title>
<script type="text/javascript" src="css/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.main{width: 800px;height: 35px;margin: 0 auto;background: #000;color: #fff;border:1px solid #ccc; border-radius: 5px;}
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: #2d2d2d;color: #a9a9a9;font-size: 14px;position: relative;border:0px;/*display: none;*/}
.twobox li:hover{background: #ccc;color: #fff;/*display: block;*/}
.three{position: absolute;top:0;left: 100px;}
.three li{width: 99px;height: 30px;line-height: 30px;border: 0;}
</style>
<!-- 三级下拉 -->
<script type="text/javascript">
$(function(){
$('.twobox').hide()
$('.three').hide()
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(500)
})
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(500)
})
$('.two>li').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.two>li').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div class="main">
<ul class="one">
<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 class="two">产品3
<ul class="three">
<li>品3.1</li>
<li>品3.2</li>
<li>品3.3</li>
</ul>
</li>
</ul>
</li>
<li>新闻
<ul class="twobox">
<li>新闻1</li>
<li class="two">新闻2
<ul class="three">
<li>新闻1.1</li>
<li>新闻1.2</li>
<li>新闻1.3</li>
</ul>
</li>
<li class="two">新闻3
<ul class="three">
<li>新闻3.1</li>
<li>新闻3.2</li>
<li>新闻3.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>