html - CSS 导航 - 光标滚出时不会在子元素菜单上保持打开状态 :hover

Question

请参阅fiddle您很快就会发现问题所在。

我正在为我的 CSS 菜单中的子项使用 :hover。当我将鼠标悬停在子项上时，随着容器大小的减小，我无法再到达“第三项”，并且我的光标位置不再悬停。

你会如何解决这个问题？是否有纯 CSS 解决方案？

子项显示通过使用 .has-children 类来工作:

#menu li.has-children:hover ul#sub-menu {
    display: block;
}

Answer 1

好吧，这里有一个解决方法:尝试简单地在#main-navigation 元素的底部放置一些填充。它会提供一些空间，光标仍会触发 :hover 状态。

#main-navigation {padding-bottom: 20px}

那里:http://jsfiddle.net/56cx8zwx/12/

我稍微清理了您的代码，不需要一些悬停规则。

但是，假设您要为菜单提供一些样式(填充到 LI 等)，我想您不需要这个。