title: How can I transition height: 0; to height: auto; using CSS?
body: <p>I am trying to make a <code>&lt;ul&gt;</code> slide down using CSS transitions.</p>
  
  <p>The <code>&lt;ul&gt;</code> starts off at <code>height: 0;</code>. On hover, the height is set to <code>height:auto;</code>. However, this is causing it to simply appear, <em>not</em> transition,</p>
  
  <p>If I do it from <code>height: 40px;</code> to <code>height: auto;</code>, then it will slide up to <code>height: 0;</code>, and then suddenly jump to the correct height.</p>
  
  <p>How else could I do this without using JavaScript?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#child0 {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
  }
  #parent0:hover #child0 {
    height: auto;
  }
  #child40 {
    height: 40px;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
  }
  #parent40:hover #child40 {
    height: auto;
  }
  h1 {
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
  &lt;hr&gt;
  &lt;div id="parent0"&gt;
    &lt;h1&gt;Hover me (height: 0)&lt;/h1&gt;
    &lt;div id="child0"&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div id="parent40"&gt;
    &lt;h1&gt;Hover me (height: 40)&lt;/h1&gt;
    &lt;div id="child40"&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;Some content
      &lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>