CSS:隐藏元素但保持宽度(而不是高度)

Question

• display:none 将完全隐藏元素,就像它现在的宽度和高度为零一样
• visibility:hidden 另一方面,将隐藏元素,但在文档中保留元素原始宽度和高度的矩形.

有没有办法通过纯CSS,隐藏一个元素,使其占据零高度,但其原始宽度？将其高度设置为零不起作用,因为我不知道将元素设置到哪个高度,我想再次显示它.

具体来说,我想实现以下目标:

#top ul        {take up zero height but original width}
#top:hover ul  {restore original dimensions}

编辑:解决了!想法是设置height:auto恢复原始高度.

请参阅http://jsfiddle.net/yP59s/获取完整版本或此处的css:

ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}

和HTML:

<div id="top">
    <h1>foobar</h1>
    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
</div>
blubber

Answer 1

#top         { width: 300px; height:0px; max-height:0px; }
#top:hover   {height: auto; width: 300px; }

http://jsfiddle.net/G5cgY/