CSS: nascondere elemento, ma mantenere la larghezza (e non altezza)

Question

• display:none sarà completamente nascondere un elemento come se ora aveva una larghezza e un'altezza pari a zero
• visibility:hidden d'altra parte si nasconde un elemento, ma prenotare un rettangolo della larghezza e altezza originali dell'elemento nel documento.

C'è un modo attraverso puro CSS, per nascondere un elemento tale che occupa altezza zero ma la sua larghezza originale? Impostando la sua altezza su zero non funziona perché non so a quale altezza impostare l'elemento una volta che voglio mostrarlo di nuovo.

In particolare voglio raggiungere i seguenti obiettivi:

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

Edit: risolto! L'idea è di impostare height:auto per ripristinare l'altezza originale.

Vedi qui http://jsfiddle.net/yP59s/ per la versione completa o qui il css:

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

e il codice 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/

Answer 2

usando css

<a href="#box1">Show Box 1</a>|<a href="#box2">Show Box 2</a>|<a href="#hidebox">Hide All</a> 

<div id="box1" class="box"> Contents of Box 1 </div> 
<div id="box2" class="box"> Contents of Box 2 </div> 

e css

.box{ 
border: 2px solid #ccc; 
padding:20px; 
margin:20px 0 0; 
max-height:150px; 
max-width:300px; 
display:none; } 



.box:target{ 
    display:block; 
} 

e ho trovato questo bel violino qualche mese fa, può essere utile: http://jsfiddle.net/DbXQs/