title: CSS Dropdown menu with animation (no js)
body: <p>Trying to create an animated dropdown menu using CSS animation, without any JS. Thought I've been barking up the right tree but can't see where I'm going wrong, for this simplified menu item...</p>
  
  <pre><code>&lt;div class="menu"&gt;Menu Item
      &lt;ul&gt;
          &lt;li&gt;Dropdown 1&lt;/li&gt;
          &lt;li&gt;Dropdown 2&lt;/li&gt;
          &lt;li&gt;Dropdown 3&lt;/li&gt;
          &lt;li&gt;Dropdown 4&lt;/li&gt;
          &lt;li&gt;Dropdown 5&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS;</p>
  
  <pre><code>.menu ul {
      height: 0px;
      overflow: hidden;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
  }
  
  .menu:hover ul {
      height: auto;
  }
  </code></pre>
  
  <p>Thought that should successfully result in a scroll down of the div, but it just keeps appearing. Any thoughts? Cheers</p>