The problem that I can’t figure out is why the submenus don’t transition well. Especially when closing, it’s easy to see that the submenus aren’t fully collapsing, and when they do at the very end they just snap shut instantly.
You can’t really transition to max-height as it becomes very jumpy which is what you are experiencing because the height is greater than the element and so get a jump at the end.
You shouldn’t also combine the padding and margin transitions on the internal elements either as that makes the browsers work very hard.Just transition the parent for smoothest effect.Also you have borders which aren’t part of the transition and just jump.
The max-height transition is a hack to overcome the fact that you can’t animate to auto and as such isn’t really designed for the job.
The only way for smooth animation is to use a fixed height but of course that doesn’t help when you don’t know the height. It’s one of the main drawbacks of CSS animation that you can’t transition nicely to zero.
If you want ot use the max-height hack thne you have to keep things very simple and not ask too much.
e.g.
Or experiment with different kinds of animation a some effect looks good and some look bad.
Thanks for your advice. I just thought that this transition as a whole would be possible, because it actually looks fairly decent when there are no submenus. I’m happy with the way it looks without the submenus, but I’d like to have the option to have submenus. I guess I’ll have to try something else.