tengo este menú
<nav class="navMenu2"> <a data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" href="#">Serviços</a> <a href="<?php echo $precos ?>">Preços</a> <a href="<?php echo $clientes ?>">Clientes</a> <a class="contacto" href="<?php echo $contactos ?>">Contactos</a> <div class="escondido"> <a href="#">Sobre Nós</a> <a href="#">Recrutamento</a> </div> <a class="pedir-demo" href="<?php echo $pedirdemo ?>">Pedir Demo</a> <div class="dot"></div> </nav>Y estoy tratando de hacer un submenú en el div "escondido", pero no permanece abierto al pasar el mouse.
mi JS:
$('.contacto, .escondido').mouseenter(function(){ if ( $(".escondido").is(':hidden') ) { $(".escondido").slideDown(200); } else { $(".escondido").slideUp(200); } });y violín: https://jsfiddle.net/r7Lm2dg3/
Aquí les dejo mi acercamiento. Lo primero, tengo que preguntar: ¿Por qué estás usando jquery en lugar de CSS puro? Porque puede lograr un efecto de desplazamiento para su menú desplegable.
Luego, si solo reconfigura la estructura DOM de la siguiente manera, el mouse solo dejará el menú desplegable <div> solo cuando deje toda la clase .has-dropdown .
$('.has-submenu').mouseenter(function(){ if ( $(".escondido").is(':hidden') ) { $(".escondido").slideDown(200); } else { $(".escondido").slideUp(200); } }); nav { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: initial; ul { list-style: none; li { list-style: none; } } } .contactos{ font-size: x-large; a{ text-decoration: none; color: black; } } .has-submenu { position: relative; } .escondido { display: none; position: absolute; bottom: 0; left: 0; padding-top: 10px; transform: translateY(100%); z-index: 1; ul { background: red; padding: 15px; margin: 0; white-space: nowrap; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <nav class="navMenu2"> <li><a data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" href="#">Serviços</a></li> <li><a href="<?php echo $precos ?>">Preços</a></li> <li><a href="<?php echo $clientes ?>">Clientes</a></li> <li class="has-submenu"> <a class="contacto" href="<?php echo $contactos ?>">Contactos</a> <div class="escondido"> <ul> <li><a href="#">Sobre Nós</a> </li> <li><a href="#">Recrutamento</a> </li> </ul> </div> </li> <li><a class="pedir-demo" href="<?php echo $pedirdemo ?>">Pedir Demo</a></li> </nav>Aquí está mi solución. Cambié el objeto y agregué el evento mouseleave. Espero que se ajuste a sus necesidades.
$('.contacto').mouseenter(() =>{ if ( $(".escondido").is(':hidden') ) { $(".escondido").slideDown(200); } }); $('.escondido').mouseleave(() =>{ if ( $(".escondido").is(':visible') ) { $(".escondido").slideUp(200); } });