超級菜單 - 無法選擇懸停的子元素

我正在將一個非常漂亮的引導程序超級菜單調整爲完全響應的版本。我希望保持菜單的外觀和風格，因爲它非常引人注目，但是該菜單目前使用Bootstrap的下拉菜單功能，這意味着用戶必須點擊以顯示菜單。在我看來，這在桌面上並不是很好的用戶體驗，因爲很多人都希望菜單出現在懸停狀態。所以，我已經適應了，當用戶將鼠標懸停在桌面上的元素顯示使用下面的代碼，以確保大型菜單的子元素的菜單：超級菜單 - 無法選擇懸停的子元素

@media only screen and (min-width: 992px){ 
    .mega-dropdown:hover .mega-dropdown-menu{ 
     display: block; 
    } 
}

這是偉大的，達到揭示的預期效果懸停在桌面上的菜單，但是當我移動鼠標來選擇菜單項時，菜單消失。我相信這是因爲觸發子菜單的鏈接和子菜單的頂部之間存在差距。

enter image description here

有什麼辦法中，我可能會導致菜單保持打開足夠長的時間，爲用戶移動到只使用HTML和CSS的子菜單？我知道我可以很容易地使用Javascript，但在我看來，Javascript應該謹慎使用，只有在真正有必要時纔會使用。

的完整代碼可以在此Codepen發現：

http://codepen.io/JasonEspin/pen/zGqoBa

來源

2015-05-14 jezzipin

您需要刪除頂部邊距，並將其替換爲實際可以覆蓋的東西，如透明邊框。

.navbar-nav>li>.dropdown-menu { 
    margin-top: 0; /* remove applied top margin */ 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    border-top: 20px solid transparent; 
}

注：我還沒有在其他的寬度測試這對你會有這樣的測試，如果這是在所有寬度需要。

Codepen Demo

來源

2015-05-14 15:49:20

謝謝Paulie_D。帶有實際代碼示例的極好的CSS解決方案。 – jezzipin

這並不完美，所以你可能需要調整。請注意，您是如何失去頂角border-radius ..oh的，頂部的灰色邊框是可見的。 –

-1

應用一種無形的填充，從而有效地連接你的菜單下拉使差距不僅是視覺，一個巨型的菜單。

並確保你有css說，當你徘徊mega菜單它保持打開狀態。

這種方式，當你的鼠標移動到它不會死的空白空間。

來源

2015-05-14 15:14:52 DCdaz

這一切都很好，但有沒有這樣的東西看不見的填充 – jezzipin

笑我知道，但這個緣故這是你所需要的。把你的megamenu的容器放進去，或者在沒有背景的情況下添加一個新的包裝，然後填充它，這樣你就可以在視覺上看到無形的填充，至少你可以在沒有中斷的情況下懸停在它上面。 – DCdaz

超級菜單 - 無法選擇懸停的子元素

回答

相關問題