title: CSS transition simultaneous
body: <p>Hi have a menu that opens on :hover.<br>
  When I hover to the next element it waits a bit.<br>
  I would like that both transitions are at same time making a accordion effect. </p>
  
  <p>What am I missing?</p>
  
  <h2><a href="http://jsfiddle.net/jSBf3/">Fiddle</a></h2>
  
  <p><strong>css</strong></p>
  
  <pre><code>ul {
      border:2px solid #aaf;
      overflow:hidden;
  }
  li {
      max-height:0px;
      -webkit-transition: max-height 1s;
      -moz-transition: max-height 1s;
      transition: max-height 1s;
  }
  ul:hover li {
      max-height:500px;
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ul class="menu"&gt;Alpha
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="menu"&gt;Beta
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="menu"&gt;Gamma
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>