Hello,
I have a menu which have a submenu that opens on hover.
You can view it here: http://v2.imutz.org/test
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.
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:
This is about the best you can hope for in that set up.
nav ul ul {
max-height:0;
transition:max-height 1s linear;
display:block;
position:absolute;
left:-999em;
height:auto;
overflow:hidden;
}
nav ul li:hover ul {
max-height:35em;
position:static;
display:block
}
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).
Hey Paul,
Thanks for the answer, I managed to add it and it works like a charm
Just a small question, do you think its possible to add a reversed animation when the submenu closes?
Well nevermind that will do with just opening animation.