请参阅fiddle，您会很快看到问题。
我在CSS菜单中使用:hover作为我的子项。当我将鼠标悬停在子项目上时，随着容器大小的减小，我无法再进入“第三项”，并且我的光标位置不再悬停。
你会如何解决这个问题？有纯CSS解决方案吗？
子项目显示使用.has-children类：
#menu li.has-children:hover ul#sub-menu {
display: block;
}
答案 0 :(得分：4)
嗯，这是一个解决方法：只需在#main-navigation元素的底部添加一些填充。 它将提供一些空间，光标仍将触发：悬停状态。
#main-navigation {padding-bottom: 20px}
那里：http://jsfiddle.net/56cx8zwx/12/
我清理了一下你的代码，没有必要使用一些悬停规则。
但是，假设您将为菜单提供一些样式（填充到LI等），我想您不需要这样。