Can CSS3 drop-down menu fade-in and fade-out?

Question

I've implemented a drop-down menu with CSS3 that fades in the drop-down nicely when the parent li 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 ul out of the way - otherwise the invisible sub-menu will appear when hovered.

I've created a JS Fiddle that demonstrates this- without the left:1000px; rule on ul#mainNav li ul, it will fade-out just fine. But then you can hover the invisible menu. - http://jsfiddle.net/YZvdm/

So how would I go about making it fade-out without making it not accidentally hoverable? height:0; will also eliminate the fade-out, so that's not an option.

Answer 1

The key to making this work is using visibility:hidden instead of display:none and using a transition-delay on the visibility until after opacity goes to 0.

.nav li ul {
  visibility: hidden;
  opacity: 0;
  -prefixes-transition-property: opacity, visibility;
  -prefixes-transition-duration: .4s, 0s;
  -prefixes-transition-delay: 0s, .4s;
}

.nav li:hover ul {
  visibility: visible;
  opacity: 1;
  -prefixes-transition-delay: 0s, 0s;
}

Fiddle: http://jsfiddle.net/YZvdm/29/

Answer 2

Turns out is was a far-better solution for me to simply implement a jQuery fade-in and out, like so:

$(function() {

    $('#topNav ul').find('ul').show().hide();
    $('#topNav > ul > li').hover(function() {
        $(this).children('ul').stop().fadeIn(300);
    }, function() {
        $(this).children('ul').stop().fadeOut('fast');
    });

}