Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

When i animate things with jQuery .animate(). I always take care to use .stop(false,true) to avoid strange animation behaviors.

In this case i wanted to make a navigation appear on the hover of certain sections. Her开发者_如何学Pythone is a demo:

http://jsfiddle.net/meo/Kbeg8/

Now if you slowly hover-out the gray element on the top, you will get a infinite animation loop, since the element that fly's in is a children of the element that triggers the animation.

Since its not the first time i encounter this difficulty: Is there any pure CSS way to avoid this? (Like children's don't trigger the parents transition) If now, how would you solve it with JS?

Yes there is a pure CSS3 way to do this. The property you need is pointer-events

Adding

nav ul {
    pointer-events:none;
}
nav:hover ul {
    pointer-events:auto;
}

seems to fix it for me in Chrome 14.