Children of element overflow?

I’m trying to build a drop down from scratch - to better understand them. I’m expecting an element set to hide overflow to completely be hidden until triggered. But that’s not happening.


Here is my site Read-Only:
https://preview.webflow.com/preview/practice-69891b?utm_medium=preview_link&utm_source=designer&utm_content=practice-69891b&preview=e918299a72d482fbda43d1b3774d8169&workflow=preview

So the reason why you have an excess on the animation is because height and padding are two different things.

Setting an element’s height to 0 will not affect the padding of that element, like how a change in margin won’t affect a change in padding.

To make this custom dropdown, you should put padding on the content/insides instead of the container.

Thanks Pendragon. I’d been giving margin to every component as well as a border to keep track of each.