鼠標光標到達前，下拉菜單消失

-1

今天我的第二個問題。我似乎無法找到答案，爲什麼在我的鼠標光標到達之前，下拉菜單消失了。鼠標光標到達前，下拉菜單消失

http://www.liveaerosmith.com

在頂部菜單中的「1970」按鈕有一個子菜單，但它不能被點擊，因爲它消失光標之前可以達到它。

FF和Chrome上的行爲相同。

來源

2017-07-31 Mr. Fontastic

讓你的'li'元素佔據了導航欄的全高度，使最終用戶的光標有一個「跳板」的dropmenu ，還可以調出下拉菜單來減少它和導航欄之間的差距。最後，減慢元素的數量，減少它在非活動狀態下的「頂級」值，這樣它就不必重新啓動並且用戶有更多時間去實現它。 – UncaughtTypeError

此圖片說明了一切：

所以有與:hover狀態和孩子ul項目

元素之間存在明顯的差距，你可以創建在一個透明:after僞元素徘徊李將連接的元素和「填補」的差距。

或者說做的正確方法：

.site-bar { 
    border-top: solid 1px #ebebeb; 
    border-bottom: solid 1px #ebebeb; 
    /*padding: 13px 0;     REMOVE THIS */ 
    z-index: 10000000; 
} 

.navigation > li > a { 
    margin-right: 30px; 
    padding: 13px 0;     /* ADD THIS */ 
} 

.navigation li:hover > ul, .navigation .sfHover > ul { 
    top: 44px;       /* INSTEAD OF 34px */ 
}

來源

2017-07-31 22:06:28

我能做些什麼來「填補空白」，而不會改變它的外觀？ –

最簡單的是在懸停的LI上使用'：after'僞。所以在懸停你「激活」（'display：block'）時，一些'：after'元素將會連接空隙（比如〜20px高度和100％寬度），因此會保留懸停LI元素的懸停狀態。 –

它可以在不添加僞元素的情況下工作。以下是它應該如何工作： https://www.cssigniter.com/preview/olsenlight –

鼠標光標到達前，下拉菜單消失

回答

相關問題