Dropdown menu hover smooth

Question

Hello Guys, it's me again ^^ Does anyone know how i can make the hover of the Navigation smoother? I want that dropdown menu to open smooth, if you know what i mean x) Thank you
https://code.sololearn.com/Wb9SOh5HBqFM/?ref=app

Answer 1

Aha! That’s because the element is still under there, just you can’t see it. Maybe play around with the height property and the opacity property so that the box for all the list items gets bigger, and there’s more space. A bit confusing, so here’s an example: https://code.sololearn.com/W7v5Pmo7E183/?ref=app

Answer 2

The display property can’t animate, so I would do something like opacity: 0; and opacity: 1;. And, the transition-duration property must be for the child elements, not the parent.

Answer 3

Ah that looks good! I dont understand that code at all but i'm really thankful for your good answer!!

Answer 4

FlyiiingDani you can add the css property “pointer-events: none;” to the child element. Then change it to “auto” when the parent is hovered, this is to make sure the child isn’t hidden once the mouse leaves the parent.

Answer 5

Thank you, Victor. Rowsej's solution is really good but i will try what you suggested.

Answer 6

Thank you very much for your quick answer! I tried what you suggestes but there is a problem now. if i even hover the area under the Nav the opacity switch from 0 to 1. Maybe you know an other way.