'身高：0;'在父母，儿童元素是看不见的，但仍然存在？

Question

查看this fiddle，其中显示了我编写的示例菜单。

这就是它未被触及的方式：

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

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

这是form元素，div目前height为0px（当点击菜单时动态变为height: auto;，显示菜单项即表格。

我在父overflow: hidden;上尝试div无济于事。我想不出别的选择。我该如何解决这个问题（使用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修复。

注意：如果有人可以解释为什么问题中提出的问题一直在发生，那将会很棒。