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;
}
You are currently using 'display' which is not something that can be transitioned.
You should use something that can be transitioned like 'opacity' combined with 'visibility'.
The following code should achieve the desired effect.
.main-nav__flyout {
display: block !important;
}
.main-nav__item .main-nav__flyout {
transition: all 0.5s ease 0.2s!important;
opacity: 0;
visibility: hidden;
}
.main-nav__item:hover .main-nav__flyout {
opacity: 1;
visibility: visible;
}
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.
This is the best solution as a fresher
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>