How to use CSS transition in dropdown menu of animation?

Question

I know that transitions do not work when changing the display mode between classes.

So, I was thinking of using jQuery to change classes. I made a fiddle here: http://jsfiddle.net/v8GTz/ , but it does not work properly :(

It seems like the border is getting animated, but the height doesn't match. And opacity only animates once.

What am I doing wrong here?

---

ok, I managed to get the fade effect to work, but the height is not an animation yet:

http://jsfiddle.net/XYD9K/

Answer 1

In particular, you do not delete the "extended" class when you stop hanging on your "ul ul". You are actually adding it again, which I think is an unintended mistake!