title: CSS: hide element but keep width (and not height)
body: <ul>
  <li><code>display:none</code> will completely hide an element as if it now had a width and height of zero</li>
  <li><code>visibility:hidden</code> on the other hand will hide an element but reserve a rectangle of the element's original width and height in the document.</li>
  </ul>
  
  <p>Is there a way through pure CSS, to hide an element such that it takes up zero height but its original width? Setting its height to zero doesnt work because I dont know to which height to set the element to once I want to show it again.</p>
  
  <p>Specifically I want to achieve the following:</p>
  
  <pre><code>#top ul        {take up zero height but original width}
  #top:hover ul  {restore original dimensions}
  </code></pre>
  
  <p>Edit: solved! The idea is to set <code>height:auto</code> to restore the original height.</p>
  
  <p>See here <a href="http://jsfiddle.net/yP59s/" rel="noreferrer">http://jsfiddle.net/yP59s/</a> for the full version or here the css:</p>
  
  <pre><code>ul {margin:0px}
  #top {border:1px solid}
  #top ul {height:0px;overflow:hidden}
  #top:hover ul {height:auto;}
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div id="top"&gt;
      &lt;h1&gt;foobar&lt;/h1&gt;
      &lt;ul&gt;
          &lt;li&gt;foo&lt;/li&gt;
          &lt;li&gt;bar&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  blubber
  </code></pre>