三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding: 0;margin: 0;}
ul li{cursor: pointer;}
.top_bar{height: 40px;width: 800px;background: #000000;margin: 50px auto;}
.box1 li{list-style: none;color: #FFFFFF;float: left;height: 40px;line-height: 40px;width: 100px;border-right: 1px solid #FFFFFF;text-align: center;background: #000000;}
.box2 li{position: relative;background: #2D2D2D;color: #A9A9A9;border: 0;}
.box2 li:hover{background: #000000;color: #FFFFFF;}
.box3{position: absolute;left: 100px;top:0px;}
</style>
<body>
<div class="top_bar">
<ul class="box1"> <!--一级菜单-->
<li>首页</li>
<li>产品
<ul class="box2"> <!--二级下拉菜单-->
<li>产品1</li>
<li class="box22">产品2 <!-- 三级下拉菜单-->
<ul class="box3">
<li>产品2.1</li>
<li>产品2.2</li>
<li>产品2.3</li>
<li>产品2.4</li>
</ul>
</li>
<li class="box22">产品3
<ul class="box3">
<li>产品3.1</li>
<li>产品3.2</li>
<li>产品3.3</li>
<li>产品3.4</li>
</ul>
</li>
<li>产品4</li>
</ul>
</li>
<li>公司新闻
<ul class="box2">
<li>新闻1</li>
<li class="box22">新闻2
<ul class="box3">
<li>新闻2.1</li>
<li>新闻2.2</li>
<li>新闻2.3</li>
<li>新闻2.4</li>
</ul>
</li>
<li class="box22">新闻3
<ul class="box3">
<li>新闻3.1</li>
<li>新闻3.2</li>
<li>新闻3.3</li>
<li>新闻3.4</li>
</ul>
</li>
<li>新闻4</li>
</ul>
</li>
<li>行业新闻</li>
<li>联系我们</li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
//find()找到当前元素集合中每个元素的后代
$(document).ready(function(){
$(".box2").hide()
$(".box3").hide()
// 鼠标划过一级菜单时二级菜单滑出
// this指向当前鼠标划过的对象
$(".box1>li").mouseover(function(){
$(this).find(".box2").slideDown(500)
})
// 鼠标离开一级菜单时二级菜单隐藏
$(".box1>li").mouseleave(function(){
$(this).find(".box2").slideUp(500)
})
//当鼠标移动到包含三级菜单的二级菜单时显示当前三级菜单
$(".box22").mouseover(function(){
$(this).find(".box3").slideDown(500)
})
//当鼠标移出包含三级菜单的二级菜单时隐藏当前三级菜单
$(".box22").mouseleave(function(){
$(this).find(".box3").slideUp(500)
})
})
</script>
</body>
</html>
总结：find()方法找到当前元素集合中每个元素的后代
this指向当前鼠标划过的对象
三级菜单相对于二级菜单对应的li定位，而不是相对于整个二级菜单
思路：先隐藏二级菜单和三级菜单
鼠标划过一级菜单时二级菜单下滑显示，划出时二级菜单上滑隐藏
鼠标划过带有三级菜单的二级菜单时三级菜单下滑显示，划出时三级菜单上滑隐藏