How to animate this menu?

I have a menu which have a submenu that opens on hover.
You can view it here:
Hover the first element and you will see another list opens.
I would like to know what changes I need to make in order to make the element that opens to animate from top to bottom instead of appearing instantly.

Hope I made myself clear, thanks :slight_smile:

The example shown in this topic may help.

Thanks, but I think using position:absolute is a problem in my case, as the links below the ones that opens need to go down too (so the menu that opens doesn’t goes over them like in the picture:

It needs to be like so:

Same animation as you shown in your link (Paul’s answer) but to make the links below the one that animates move too.

This is about the best you can hope for in that set up.

nav ul ul {
	transition:max-height 1s linear;
nav ul li:hover ul {


Add those rules after your original to see the effect.

It uses max-height for the animation but with a max-height greater than you will need. You can’t do it with height because you want height auto and you can,'t animate to an auto position unfortunately (although 99% of the time that’s what you want).

1 Like

Hey Paul,
Thanks for the answer, I managed to add it and it works like a charm :slight_smile:
Just a small question, do you think its possible to add a reversed animation when the submenu closes?

Well nevermind that :stuck_out_tongue: will do with just opening animation.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.