摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三级菜单</title><style type="text/css">*{margin:0px;padding:0px;}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级菜单</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.menu{width:800px;height:35px;margin:0px auto;margin-top:20px;background:#000;color:#fff;border:1px solid #ccc;border-radius:5px;}
ul{list-style:none}
ul li{float:left;width:100px;height:35px;background: #2d2d2d;font-size:14px;color: #a9a9a9;text-align: center;line-height:35px;border-right:1px solid #ccc;cursor: pointer;}
.twobox li{position: relative;;}
.twobox li:hover{background:#000;color:#fff;}
.one li:hover{background:#000;color:#fff;}
.three{position:absolute;top:0px;left:100px;}
.three li{width:100px;height:30px;background: #2d2d2d;font-size:14px;color: #a9a9a9;}
</style>
<script type="text/javascript" >
$(document).ready(function(){
$('.twobox').hide()
$('.three').hide()
$('.two').hide()
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(500)
})
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(500)
})
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.two>li').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>首页</li>
<li>产品
<ul class="twobox">
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
</ul>
</li>
<li>新闻
<ul class="twobox">
<li>产品1</li>
<li class="two">产品2
<ul class="three">
<li>细分1</li>
<li>细分2</li>
<li>细分3</li>
</ul>
</li>
<li>产品3</li>
</ul>
</li>
<li>案例
<ul class="twobox">
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
</ul>
</li>
<li>联系我们2</li>
<li>联系我们1</li>
<li>联系我们1</li>
</ul>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-11 09:48:22
老师总结：可以直接在div上使用display:none;就可以了,一种方法不可以,可以尝试其他方法解决
