Transitions on the CSS display property

itemprop="text">

I'm currently designing a CSS 'mega
dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains
different types of content.

At the moment,
it appears that CSS 3 transitions don't apply to the 'display'
property, i.e., you can't do any sort of transition from
display: none to display: block (or
any combination).

Is there a way for the
second-tier menu from the above example to 'fade in' when someone hovers over one of the
top level menu items?

I'm aware that
you can use transitions on the visibility: property, but I
can't think of a way to use that
effectively.

I've also tried using height, but
that just failed miserably.

I'm also aware that
it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use
just CSS, and I think I'm coming up a little short.

Answer

You can concatenate two transitions or more,
and visibility is what comes handy this
time.

data-hide="false" data-console="true" data-babel="false">
class="snippet-code">

div {
 border: 1px solid
            #eee;
}
div > ul {
 visibility: hidden;

            opacity: 0;
 transition: visibility 0s, opacity 0.5s
            linear;
}
div:hover > ul {
 visibility:
            visible;

 opacity:
            1;
}

            

 
Item 1
 
Item
            2
 
Item 3

            

(Don't
forget the vendor prefixes to the transition
property.)

More details are in href="http://www.greywyvern.com/?post=337" rel="noreferrer">this
article.