水平下拉菜單MouseOver問題

Question

在網上搜索幾個小時後，我決定編寫自己的水平下拉菜單代碼，該菜單允許下拉菜單中的html內容而不是每個人使用的標準「列表」項目。與我發現的大多數下拉菜單相比，我的代碼非常少。我有兩個讓我瘋狂的問題。

問題1： 當您將鼠標放在類別上時，'dropdown'div顯示爲應該顯示，但是當您將鼠標懸停在'dropdown'div上時，它會消失。但是，如果你將鼠標懸停在另一個類別上，那麼'dropdown'div會消失，並且新的一個會出現，因爲它們都應該。我錯過了什麼？

問題2： 如果將光標停在類別的下劃線鏈接出現的位置並將其留在那裏，則「下拉」div會彈出兩次以閃爍。無法弄清楚嗎？

我已經發布我的代碼在這裏：http://jsfiddle.net/UXxL8/

非常感謝，我知道這可能是一些簡單的我俯瞰。但是你知道在你盯着相同的代碼太久之後它是怎麼回事......

Answer 1

您還需要將mouseover/mouseout綁定到下拉列表。而下拉閃爍的原因是因爲動畫功能排隊 - fadeIn在fadeOut完成後開始，因此在添加另一個動畫之前需要添加stop。

Here's改進的代碼。

Answer 2

現在你將你的行爲直接附加到錨上。當您將鼠標放到新曝光的內容時，您已經超出了您的錨點區域並觸發了鼠標懸停。如果您將錨點和下拉列表放在同一個容器中，然後將您的事件附加到該容器中，您將獲得預期的行爲。

我還建議使用mouseenter和mouseleave而不是mouseover和mouseout，因爲您的菜單中會包含子元素。這question是一個很好的描述爲什麼這是明智的。

我設置了更新的小提琴here。類別3菜單項已更新。