Css 与'；身高：0'；在父元素上，子元素不可见，但仍然存在？

看看我写的菜单示例

这就是它未被触动的样子：

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

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

这是驻留在

div

中的

form

元素，其

height

此时为

0px

（单击菜单时动态变为

height:auto；

，显示菜单项，即表单）

我尝试过溢出：隐藏div上的code>无效。我想不出其他选择。我如何（使用CSS）修复此问题

---

编辑：修复中的图像链接。这个问题只存在于Chrome中。Firefox中的一切都很好。不知道为什么。

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

.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@Mr.Alien仔细看第三张图片。搜索

图标应为白色。它是黑色的，因为在某种程度上，鼠标悬浮在菜单项上。明白我想说什么了吗？编辑：为了清晰起见，对问题进行了编辑。您忘记将图标图像URL更改为fiddle中的imgur链接，因此它们不会显示。@BoltClock确定吗？这里的工作很好。@It_me图像不见了，伙计