Why is the site navigation collapsing so fast?

When you look at the menu of this website: https://www.eurotuin.be/

And when you try to hover it, it collapses really fast. see the menu here

I’ve tried experimenting with the following code, but it doesn’t seem to work:

.main-nav__link {
    transition:all 0s ease 0s!important;
}

This one has same effect:

.main-nav__link {
    transition:all 3s ease 3s!important;
}

Answer

Two things :

• How transition would have any effect if duration is 0s (I’m no expert, this is a genuine question) ? Plus the transition is applied on your link, it wouldn’t have any effect on your menu (which is a different element).

• So the issue here is : your menu is shown/hidden with the change of the display property from none to block.

More precisly, .hide() and .show() are applied to the menu element on mouseout and mouseover events (from the li element). So the menu ‘hide’ and ‘show’ as soon as the mouse enter or exit the li element.

Also be aware that the display property can’t be animated or transitioned.