CSS3 transition fadein with display:none

Question

I've got some element I want to fade with CSS3. It can be simply done by 2 classes with opacity: 0 and opacity: 1, but problem is faded element is some dropdown menu and it has elements under it, so even if it has opacity: 0, its still 'clickable' and elements under it are not.

If I add display: none; attribute, element is not animated.

Is it possible with css only to avoid it?

I've checked this but didnt find working solution

http://jsfiddle.net/Eh7jr/

Answer 1

Instead of display:none, try using visibility: hidden;

FIDDLE

See this article which states:

visibility animates despite the CSS Basic Box Model spec saying “Animatable: no”