虽然做的时候比较繁琐，因为jquery用的还不是很熟悉，不过完成之后发现其实没有多少技术含量，且发上来供大家参考把。
代码：
.. code:: html
<!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=GB2312">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="homenew.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var tab_cate_out = $(".tab-cate-out");
var tab_cate_inner = null;
var popup_cate = $(".popup-cate");
tab_cate_out.mouseover(function() {
tab_cate_inner=$(this);
tab_cate=tab_cate_inner.children(".tab-cate");
tab_cate_inner.addClass(" cate-menu-on");
tab_cate_inner.next(".popup-cate").show();
/*以下两个事件给弹出窗体*/
tab_cate_inner.next(".popup-cate").mouseover(function() {
tab_cate_inner.addClass(" cate-menu-on");
tab_cate_inner.next(".popup-cate").show();
});
tab_cate_inner.next(".popup-cate").bind("mouseleave", function() {
tab_cate_inner.next(".popup-cate").hide();
tab_cate_inner.removeClass("cate-menu-on");
});
});
//关键的一句，绑定Div对象的mouseleave事件
tab_cate_out.bind("mouseleave", function() {
tab_cate_inner.next(".popup-cate").hide();
tab_cate_inner.removeClass("cate-menu-on");
});
});
</script>
</head>
<body>
<div id="cate-menu" class="cate-menu">
<div class="cate-menu-box">
<div class="tab-cate-out ">
<a href="#">测试数据</a>
<div class="tab-cate img">
<a href="#">测试数据</a>
<a href="#">测试数据</a>
</div>
</div>
<div class="popup-cate" style="display: none;">
<ul>
<li><a href="#"> 测试数据</a></li>
<li><a href="#"> 测试数据</a></li>
</ul>
</div>
</div>
<div class="cate-menu-box"><div class="tab-cate-out ">
<a href="#">测试数据</a>
<div class="tab-cate img">
<a href="#">测试数据</a>
<a href="#">测试数据</a> </div></div>
<div class="popup-cate" style="display: none;">
<ul>
<li><a href="#"> 测试数据</a></li>
<li><a href="#"> 测试数据</a></li>
</ul>
</div>
</div>
<div class="cate-menu-box">
<div class="tab-cate-out ">
<a href="#">测试数据</a>
<div class="tab-cate img">
<a href="#">测试数据</a>
<a href="#">测试数据</a>
</div>
</div>
<div class="popup-cate" style="display: none;">
<ul>
<li><a href="#"> 测试数据</a></li>
<li><a href="#"> 测试数据</a></li>
</ul>
</div>
</div>
<div class="cate-menu-box"><div class="tab-cate-out ">
<a href="#">测试数据</a>
<div class="tab-cate img">
<a href="#">测试数据</a>
<a href="#">测试数据</a>
</div>
</div>
<div class="popup-cate" style="display: none;">
<ul>
<li><a href="#"> 测试数据</a></li>
<li><a href="#"> 测试数据</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>打包下载：点我呀 <http://u.115.com/file/f4787acd98>_
----EOF-----
微信公众号：Python程序员杂谈
微信公众号：Python程序员杂谈
