+ 2

Dropdown menu hover smooth

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

26th Mar 2019, 8:28 PM
FlyiiingDani
FlyiiingDani - avatar
6 Answers
+ 8
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
26th Mar 2019, 9:12 PM
Rowsej
Rowsej - avatar
+ 6
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.
26th Mar 2019, 8:57 PM
Rowsej
Rowsej - avatar
+ 2
Ah that looks good! I dont understand that code at all but i'm really thankful for your good answer!!
26th Mar 2019, 9:17 PM
FlyiiingDani
FlyiiingDani - avatar
+ 2
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.
26th Mar 2019, 10:10 PM
Victor Andersson
Victor Andersson - avatar
+ 2
Thank you, Victor. Rowsej's solution is really good but i will try what you suggested.
27th Mar 2019, 6:22 AM
FlyiiingDani
FlyiiingDani - avatar
+ 1
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.
26th Mar 2019, 9:08 PM
FlyiiingDani
FlyiiingDani - avatar