<ul><li><a href="JavaScript:">gagggg</a>
<dl><dd>zzzzzzzzzz</dd><dd>zzzzzzzz</dd><dd>zzzzzzzzzz</dd><dd>zzzzzzzzzzzzz</dd><dd>zzzzzzzzzzzzzzz</dd></dl>
</li>
</ul>
<script type="text/javascript">
$('li').children('dl').css({'margin': '0','display' :'none'})
$('li').mouseover(function(){
$(this).children('dl').slideDown();
});
$('li').mouseout(function(){
$(this).children('dl').slideUp();
});
</script>
上面的寫法 當a標簽沒有display：block的情況下（主要是看a標簽又沒有占滿li寬度和高度，因為mouse事件是給li的），當放到a標簽的時候下拉菜單slideDown兩次，中間有一次slideUp；若鼠標橫向移動離開a標簽但是沒有移除li標簽的范圍；下拉菜單發生一次sildeUp和一次slideDown；當鼠標下移，移到下拉菜單上的時候，下拉菜單會無限次的slideDown與silideUp；
當a標簽display：block時，a標簽占滿了li的寬度，鼠標放到a上時下拉菜單一次sildeDown（正常效果）；鼠標下移到下拉菜單上時，下拉菜單還是會無限次的slideDown與silideUp；
多次發生slideDown與sildeUp的情況主要是因為 mouse事件問題：
mouseover與mouseenter
不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。
只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。
mouseout與mouseleave
不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。
1：a標簽沒有display：block；可以看到下圖中li標簽與a標簽之間有1px的間隔；
所以當鼠標放到a上的時候（鼠標從li的上方往下移動），觸發事件的順序是：li標簽的mouseover→slideDown一次；
鼠標從1px到a標簽上觸發 li 標簽的mouseout→slideUp一次；
鼠標放到 a 標簽上觸發 li 標簽的mouseover→slideDown一次；
2：鼠標接着橫向往有移動。觸發事件的順序：離開a標簽觸發li標簽的mouseout→slideUp一次；
鼠標放到li上觸發 li 標簽mouseover→slideDown一次；
3：鼠標下移到下拉菜單上。觸發事件的順序：li標簽的mouseout→slideUp一次；
slideUp是個過程需要時間，但是mouseout與mouseover瞬間發生；下拉菜單還沒有sildeUp完成鼠標已經觸發了下拉菜單的mouseover；
下拉菜單的mouseover→slideDown一次；
就這樣事件多次被觸發（火狐下是無限觸發）；
那么怎么解決呢？1：可以用jq的stop方法阻止動畫；寫法簡單；
2：可以從事件觸發的角度解決。
1：$(this).children('dl').stop(true).slideDown();$(this).children('dl').stop(true).slideUp();