title: Can CSS3 drop-down menu fade-in and fade-out?
body: <p>I've implemented a drop-down menu with CSS3 that fades in the drop-down nicely when the parent <code>li</code> is hovered. But the drop-down will not fade-out and here's why. Since you can't transition the display property, the fade is accomplished by transitioning the opacity. Since just the opacity is transitioned, you need to move the sub <code>ul</code> out of the way - otherwise the invisible sub-menu will appear when hovered. </p>
  
  <p>I've created a JS Fiddle that demonstrates this- without the <code>left:1000px;</code> rule on <code>ul#mainNav li ul</code>, it will fade-out just fine. But then you can hover the invisible menu. - <a href="http://jsfiddle.net/YZvdm/" rel="nofollow">http://jsfiddle.net/YZvdm/</a></p>
  
  <p>So how would I go about making it fade-out without making it not accidentally hoverable? <code>height:0;</code> will also eliminate the fade-out, so that's not an option.</p>