title: CSS hover transition - how to remove delay?
body: <p>I can't believe I am having trouble with a basic transition... but alas, I am. I can't actually find another post with this problem, so there must be something specifically wrong with my code.</p>
  
  <p>I am doing a simple transition with max-height so that when you hover over a menu item, the sub-menu slides down, like so:</p>
  
  <pre><code>ul.sidenav ul {
      padding:0;
      margin:0;
      list-style:none;
      max-height:0;
      overflow:hidden;
      transition:max-height 1s ease-in-out;
      }
  
  ul.sidenav &gt; li:hover &gt; ul {max-height:999px;}
  </code></pre>
  
  <p>This works fine on mouseover, but on mouse-out there is a noticeable delay before it slides back up. I've tried various ease-in/ease-out settings, and I've tried adding a separate time to the mouse-out. But that delay remains.</p>
  
  <p>What is going on? Here is a fiddle showing the problem:
  <a href="http://jsfiddle.net/t5Wv2/8/" rel="nofollow">http://jsfiddle.net/t5Wv2/8/</a></p>