CSS Menu Dropdown懸停問題

Question

我遇到了響應式下拉導航列表的問題，因此如果您將鼠標慢慢移出父鏈接，最後父項的子菜單會顯示。

我已經上傳了一個例子：http://webe.emv3.com/aps/twelve/primary.html

如果你將鼠標懸停在「充值卡」，然後慢慢移動鼠標向下朝子菜單，幫助改爲激活。

你知道爲什麼會發生這種情況嗎？

Answer 1

我找到了原因。有上線153-156的邊界問題：

.rdd-menu .submenu-panel { 
    border-radius:0 0 10px 10px; 
    border:1px solid #ccc; 
    border-top:0; 

即使上邊框已被拆掉，具有左，右和底部邊框導致此問題。刪除它們已解決它。

我感謝您的幫助。謝謝。

Answer 2

這是因爲.rdd-menu .submenu-panel沒有隱藏和/或定位。因此，當您將鼠標懸停在父項上時，所有.submenu-panel仍然可見。擁有height:0不會隱藏一個元素。

簡單：

.rdd-menu .submenu-panel { 
    display: none; 
}  

.rdd-menu li:hover > .submenu-panel { 
    display: block; 
} 

將修復它。你也可以忽略你的身高聲明。

編輯：我只是注意到你有過渡他們。您可以將子菜單的屏幕位置置於屏幕外，以保持轉換完整：

.rdd-menu .submenu-panel { 
    top: -10%; 
}  

.rdd-menu li:hover > .submenu-panel { 
    top: 100%; 
}