标签：
当鼠标移到一级菜单上时，二级菜单显示，当移到二级菜单上是，还显示，移出二者时，二级菜单隐藏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
#box{
width:200px;
height:500px;
margin:0 auto;
}
#box ul li{
list-style: none;
float:left;
margin-right:10px;
border: 1px solid #ccc;
}
#box ul li dl dd{
margin-top:10px;
padding: 0;
margin: 0;
}
#box ul li dl dd p{
margin-top:10px;
}
.hide{
display:none;
}
</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘#box ul li dl dt‘).mouseover(function(){//当鼠标移到dt上触发
$(this).siblings(‘dd‘).removeClass(‘hide‘);//在此dt的兄弟节点上删除class，使二级菜单显示，用兄弟节点查找为了防止多个dt标签的干扰
})
$(‘#box ul li dl dt‘).mouseout(function(){//当鼠标移出dt触发
$(this).siblings(‘dd‘).mouseover(function(){//当鼠标又到二级菜单上时，还显示
$(this).removeClass(‘hide‘)
})
$(this).siblings(‘dd‘).mouseout(function(){//当移出dd，也移出dd时，添加class，二级菜单隐藏
$(this).addClass(‘hide‘);
})
})
})
</script>
</head>
<body>
<div id="box">
<ul>
<li>
<dl>
<dt><a href="">客户服务</a></dt>
<dd class="hide">
<p><a href="">帮助中心</a></p>
<p><a href="">售后服务</a></p>
<p><a href="">在线客服</a></p>
<p><a href="">意见建议</a></p>
<p><a href="">客服邮箱</a></p>
</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="">客户服务</a></dt>
<dd class="hide">
<p><a href="">帮助中心</a></p>
<p><a href="">售后服务</a></p>
<p><a href="">在线客服</a></p>
<p><a href="">意见建议</a></p>
<p><a href="">客服邮箱</a></p>
</dd>
</dl>
</li>
</ul>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lzzhuany/p/4607226.html
