css - '高さ：0;' 親では、子要素は表示されませんが、それでもありますか？

Question

私が書いたサンプルメニューを示すこのフィドルを見てください。

これはそれが手つかずのように見える方法です：

...マウスをメニューに合わせたとき：

... [検索]メニューのすぐ下の空白の近くにマウスを置いたとき（[検索]メニューをよく見てください。検索アイコンは白である必要があります。マウスがメニューにカーソルを合わせているため、黒になっています。隠されているアイテム）：

これは、現在のaに存在する要素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);
}

これが修正のフィドルです。

注：それでも、質問で提示された問題がまったく発生している理由を誰かが説明できれば素晴らしいと思います。