CSS dropdown menu fading transition and display

Question

I've been doing my homework and it appears you can't use the CSS transition effect where you're using display:none; and display:inline; and so on.

I'm wanting to add a fade in and out on hover to my CSS dropdown menu to make it look cleaner. This isn't possible when using the display element as I've discovered.

I tried removing display from my CSS but when I do this the element is there (despite not being visible) and fades in when you hover over it. I read a suggestion to add "pointer-events:none;" to this, which isn't cross browser compatible. It also causes the fading element to flicker if you run your mouse over it again.

I also used a CSS keyframes animation suggestion to fade in whilst using the display element, but couldn't get this to fade out when the mouse leaves. :(

I know this is possible because I've seen it on many websites but I just can't get it working right for mine.

Here's my code:

http://pastebin.com/zVQapUNz

Answer 1

I've written your code in jsfiddle.net

http://jsfiddle.net/3PD7D/1/

this does work when the mouse moves over it, you can use the same concept to change the opacity

from {opacity:1;}
to {opacity:0;}

to hide the menu. However this will make it transparent any thing behind would be visible but not clickable. I've not tried what would happen if you add the display:none to the end animation frame.