Cuando mira el menú de este sitio web: https://www.eurotuin.be/
Y cuando intentas moverlo, se derrumba muy rápido. ver el menú aquí
He intentado experimentar con el siguiente código, pero parece que no funciona:
.main-nav__link { transition:all 0s ease 0s!important; }Este tiene el mismo efecto:
.main-nav__link { transition:all 3s ease 3s!important; }Actualmente está utilizando 'pantalla', que no es algo que se pueda cambiar.
Debe usar algo que se pueda cambiar como 'opacidad' combinado con 'visibilidad'.
El siguiente código debería lograr el efecto deseado.
.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; }Dos cosas :
¿Cómo tendría algún efecto la transición si la duración es 0s (no soy un experto, esta es una pregunta genuina)? Además, la transición se aplica en su enlace, no tendría ningún efecto en su menú (que es un elemento diferente).
Entonces, el problema aquí es: su menú se muestra/oculta con el cambio de la propiedad de visualización de ninguno a bloquear.
Más precisamente, .hide() y .show() se aplican al elemento del menú en los eventos mouseout y mouseover (desde el elemento li). Entonces, el menú 'ocultar' y 'mostrar' tan pronto como el mouse ingrese o salga del elemento li.
También tenga en cuenta que la propiedad de visualización no se puede animar ni cambiar.
Esta es la mejor solución como un más fresco
<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>