做一个下拉菜单的时候，HTML结构如下：
<ul>
<li class="red">
<a href="">第一级</a>
</li>
<li class="red">
<a href="">第一级</a>
</li>
<li class="red">
<a href="">第一级</a>
<div class="white">
<a href="">第二级</a>
</div>
<div class="white">
<a href="">第二级</a>
</div>
</li>
</ul>
如果对 .red a 绑定mouseover事件，而对整个li（包含第一级和第二级菜单）绑定mouseout事件的话，
li的子元素，也就是任何一个div，甚至任何一个a，都会被绑定mouseout，从而没法使得菜单在正确的时候收起（离开整个li的时候）。
用javascript直接判断对逻辑要求比较高，甚至可以说是我的噩梦。
其实jquery有两个方法可以简单快速的解决这个问题，这两个方法还可以连缀使用：
$(".white a").mouseenter(function(){
相当于mouseover的部分
}).mouseleave(function(){
相当于mouseout的部分
});
然后如果还有相应的点击事件，和mouseout一样，需要判断并排除与click事件的冲突，避免无法呈现选中状态。
mouseenter([[data],fn])
概述
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
参数
fnFunctionV1.0
在每一个匹配元素的mouseenter事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3
data:mouseenter([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。
示例
描述:
当鼠标指针进入（穿过）元素时，改变元素的背景色：
jQuery 代码:
$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
mouseleave([[data],fn])
概述
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
参数
fnFunctionV1.0
在每一个匹配元素的mouseleave事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3
data:mouseleave([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的mouseleave事件中绑定的处理函数。
示例
描述:
当鼠标指针离开元素时，改变元素的背景色：：
jQuery 代码:
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});