當我將鼠標懸停在下拉菜單上時，爲什麼我的下拉菜單不顯示？

Question

好的，我的頁面上有兩個下拉菜單，導航和鏈接。鏈接正常工作，但當我試圖將鼠標懸停在其上時，導航消失。我不知道爲什麼，所以我問。 爲什麼當我將鼠標懸停在導航菜單上時，導航菜單會消失，我該如何解決？

My site with the error

Answer 1

您有一個元素掛在名爲#crwrap的左側菜單上。因此，當將鼠標移動到導航選項時，將會觸發鼠標移動，因爲您突然懸停了#crwrap元素而不是導航菜單。它是不可見的，但如果您使用支持DOM搜索的調試工具，則會看到它覆蓋導航菜單選項的區域。

它沒有覆蓋鏈接菜單，因此沒有任何問題。

如果您刪除#crwrap（或使用z-index: -999將其移動到背景），它對我來說工作正常。

Answer 2

你的JS，顯示菜單被鼠標懸停在你的菜單部分的元素的鼠標移開切換。子菜單不嵌套在這些元素中。因此，當您將鼠標向下移動到子菜單時，會觸發隱藏子菜單的主菜單項上的鼠標移出。

我會推薦在主菜單項的容器中嵌套子菜單項。

我還建議你查看關於CSS hybrid menus的優秀alistapart.com文章。它有一些很棒的指針和技巧，你可能會覺得有用。