Submenu open on hover and don't stay opened-CodePudding

i have this menu

                  <nav >
                  <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  href="<?php echo $contactos ?>">Contactos</a>
                  <div >
                  <a href="#">Sobre Nós</a>  
                  <a href="#">Recrutamento</a>  
                  </div>
                  <a  href="<?php echo $pedirdemo ?>">Pedir Demo</a>
                  <div ></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/

CodePudding user response：

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 >
  <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 >
      <a  href="<?php echo $contactos ?>">Contactos</a>
      <div >
        <ul>
          <li><a href="#">Sobre Nós</a>  </li>
          <li><a href="#">Recrutamento</a>  </li>
        </ul>
      </div>
  </li>
  <li><a  href="<?php echo $pedirdemo ?>">Pedir Demo</a></li>
</nav>

CodePudding user response：

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);
  }
});