i have this menu
<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>
And i'm trying to make a submenu on "escondido" div, but it don't stay opened on hover.
my JS:
$('.contacto, .escondido').mouseenter(function(){
if ( $(".escondido").is(':hidden') ) {
$(".escondido").slideDown(200);
} else {
$(".escondido").slideUp(200);
}
});
and fiddle: https://jsfiddle.net/r7Lm2dg3/
Here I let you my aproach. The first thing, I've to question: Why are you using jquery instead of pure CSS? Because you can achieve a hover effect for your dropdown menu.
Then, if you just reconfigure the DOM structure as follows the mouse only will leave the dropdown <div> only when leave the entire .has-dropdown class.
$('.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>Here is my solution. I've changed object and added mouseleave event. I hope it fits Your's needs.
$('.contacto').mouseenter(() =>{
if ( $(".escondido").is(':hidden') ) {
$(".escondido").slideDown(200);
}
});
$('.escondido').mouseleave(() =>{
if ( $(".escondido").is(':visible') ) {
$(".escondido").slideUp(200);
}
});