css - 父元素为 'height: 0;'，子元素不可见，但还在？

Question

看看this fiddle它显示了我编写的示例菜单。

这是它看起来未受影响的样子:

...当鼠标悬停在菜单上时:

...当鼠标悬停在“搜索”菜单正下方的空白附近时(仔细查看“搜索”菜单。搜索图标应该是白色的。它是黑色的，因为鼠标在某种程度上悬停在隐藏的菜单项上):

这是 form 元素驻留在 div 中，此时 height 为 0px(变为 height: auto; 在单击菜单时动态显示菜单项，即表单)。

我在父 div 上尝试了 overflow: hidden; 但无济于事。我想不出其他选择。我该如何解决这个问题(使用 CSS)？

编辑:修复了 the fiddle 中的图片链接.问题仅在 Chrome 中仍然存在。在 Firefox 中一切正常。不知道为什么。

Answer 1

我不知道为什么会发生这种奇怪的事情，但我相信它不应该发生。不过，有一个临时修复方法:

.menu-item > a:hover > [class*="icon-"],
.menu-item > a:hover > [class*=" icon-"],
.menu-item > a.selected > [class*="icon-"],
.menu-item > a.selected > [class*=" icon-"] {
  background-image: url(http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png);
}

Here's a fiddle与修复。

注意:不过，如果有人能解释为什么问题中出现的问题会发生，那就太好了。