私の上にマウスを置いてもドロップダウンメニューが表示されないのはなぜですか？

Question

さて、ページ、ナビゲーション、リンクの2つのドロップダウンメニューがあります。リンクは正常に動作しますが、マウスの上にマウスを置くとナビゲーションが消えます。なぜ、私は尋ねているのか分かりません。 ナビゲーションメニューにカーソルを置いても表示されなくなるのはなぜですか？

My site with the error

Answer 1

#crwrapという名前の左メニューにハングアップしている要素があります。したがって、マウスをナビゲーションオプションに移動すると、ナビゲーションメニューの代わりに#crwrap要素を突然ホバーしているため、マウスアウトがトリガーされます。表示されませんが、DOM検索をサポートするデバッグツールを使用すると、ナビゲーションメニューオプションの領域をカバーするようになります。

[リンク]メニューをカバーしていないため、問題はありません。

#crwrapを削除した場合（またはz-index: -999を使用してバックグラウンドに移動した場合）、正常に動作します。

Answer 2

メニューは、メニューセクション内の要素のマウスオーバーとマウスアウトでトグルされる示すためにあなたのJS。サブメニューはこれらの要素の内部にネストされていません。したがって、マウスをサブメニューの方向に動かすと、サブメニューを隠しているメインメニュー項目でマウス出力がトリガーされます。

メインメニュー項目のコンテナ内にサブメニュー項目を入れ子にすることをお勧めします。

私はまた、CSS hybrid menusについての優れたalistapart.comの記事をチェックすることをお勧めします。それは便利ないくつかの優れたポインタとテクニックを持っています。