html结构如下：
<ul id="topNav"> <li class="popular"> <a href="javascript:void(0);">Popular</a> <div class="dropMenuList"> <a href="popular/message">Popular message</a> <a href="popular/people">Popular people</a> </div> </li> <!--li loops--> </ul>
实现效果如下：
$("#topNav > li").mouseover(function(){
$("div", $(this)).slideDown();
}).mouseout(function(){
$("div", $(this)).slideUp();
});
这样写会发现当移动到dropMenuList上时整个div会一直做slideDown和slideUp的死循环，也无法点击dropMenuList上的项目，将slideDown换成hide效果则无此问题，但是效果就没了不是，于是去官网查文档，发现关于mouseover的说明有这么一句话：
Show texts when mouseover and mouseout event triggering. Mouseover fires when the pointer moves into or out from child element, while mouseenter does’t.
意思就是，mouseover方法当鼠标移动到元素本身以及其子元素时都会被触发，而mouseenter则只在元素本身会被触发，移动到其子元素不会再次触发。
于是：
$("#topNav > li").bind("mouseenter", function(){
$("div", $(this)).slideDown();
}).bind("mouseleave",function(){
$("div", $(this)).slideUp();
});
O了。
今天在其他项目使用又发现了个问题，因#topNav > li与div之间有间隔，也会导致这样的死循环，要注意li与div之间无缝衔接XD
