CSSの垂直メニューをドロップダウンメニューに変換する - 一度ドロップすると外に出ることはできません

Question

私はドロップダウンに変換する垂直CSSメニューがあります。私はそれをドロップダウンするためにマウスオーバーのためのいくつかのjavascriptを追加しましたが、それはmouseoutに行くことができません。

http://jsfiddle.net/hCVjK/4/

Answer 1

それはあなたがフェードアウトの代わりに、すぐに隠れている場合は特に、解決するためにトリッキーな問題です。マウスが何を上に乗っているかを追跡し、あるタグから別のタグに移動すると同時にmouseenterイベントとmouseleaveイベントが完全には発火しないという事実を考慮する必要があります。

これを試してみてください：HTMLでhttp://jsfiddle.net/cgagliardi/NPVVQ/

は、私はあなたがカテゴリに持っていたonMouseOverのコードを削除し、JSにそれを移動しました。 CSSで

、私はそれはさておき

#navigation { ... display: none } 

に

#navigation { ... visibility: hidden } 

を変更し、すべての変更は、JavaScriptです。メインメニューがフェードアウトするのにかかる時間を遅らせたい場合は、setTimeoutコールで100の値を変更します。