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 CSS3 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).
Can anyone think of 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 utilise that effectively.
I've also tried using height but that just failed miserably.
All and any suggestions are most welcome.