css - 与'高度：0;' 在父元素上，子元素是不可见的，但仍然存在吗？

Question

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

这是它看起来原封不动的样子：

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

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

那是当前位于 who is中的form元素（在单击菜单时动态变为，显示菜单项，即表单）。divheight0pxheight: auto;

我已经尝试overflow: hidden;过父母div无济于事。我想不出其他选择。我该如何解决这个问题（使用 CSS）？

编辑：修复了小提琴中的图像链接。问题仅在 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);
}

这是修复的一个小技巧。

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