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.