CSS懸停菜單問題

我的CSS懸停菜單出現問題。CSS懸停菜單問題

它彈出完美的罰款，並在正確的位置，但是當我嘗試去彈出菜單中的選項之一，它消失了，對於我的生活，我無法弄清楚如何停止它從這樣做。

當我嘗試選擇其中一個子菜單選項時，是否有辦法阻止菜單消失？

我環顧四周堆棧溢出（糾正我，如果我錯了），並沒有發現這樣的事情，但這可能是因爲我不知道如何正確地搜索這個問題。

我也嘗試過使用jQuery，但是我也遇到同樣的問題。

你可以看到一個小提琴here它完美地顯示了問題。

謝謝。

來源

2012-05-02 Joshua M

你應該得到螢火蟲，並學會使用它。這是一個很棒的工具。 getfirebug.com ..他會告訴你答案。這個問題的原因是非常合乎邏輯的。第一層'li'（'：hover'元素）和你的第二層'ul'（子菜單元素）在它們之間有間隙。這個差距是由第一層'ul'中的一個大填充產生的。（當然''.navigation'中的小墊子沒有幫助。） – Joonas

嗨，Lollero，我有螢火蟲 - 但是我想我一直在關注這個問題很久以至於我失去了方向，而不是像我應該那樣思考它。 –

我回答我自己的問題實際上。

我給.navigation ul li:hover ul分配了一個類，名爲.showup，另一個類將.navigaiton ul li ul的顯示設置爲none。

然後我跑這jQuery來使其工作

$('li:has(ul)').hoverIntent(function() { 
    $(this).find('ul').removeClass('hide'); 
    $(this).find('ul').addClass('showup'); 
}, function() { 
    $(this).find('ul').removeClass('showup'); 
    $(this).find('ul').addClass('hide'); 
})

，現在它的偉大工程！

來源

2012-05-02 17:02:46

添加到您的CSS：

li.sign { 
    width: 80% !important; 
} 

.navigation ul li { 
    width: 115%; 
}

來源

2012-05-02 11:31:38

如果您從li進入第一個子菜單選項，這會使其工作，但這不一定會解決問題。人們將鼠標懸停在選項上，看到彈出菜單，並且想要選擇更低的選項，這意味着它仍然會消失。不過謝謝。 –

給予寬度 - >的.navigation UL相應

.navigation ul { 
padding: 20px 20px 20px 40px; 
list-style: none; 
    width:300px; // according to your 
}

來源

2012-05-02 11:34:21

再一次，這依賴於somoene將從'頂層' - >'子菜單中的第一個選項'去做的假設，人們不會這樣做。 –

我希望下面的鏈接將幫助您

http://jsfiddle.net/j8Ny4/9/

來源

2012-05-02 11:59:20

CSS懸停菜單問題

回答

相關問題