jquery - Hide dropdown menu jquery

Question

Well I have a simple question for those who knows jQuery. First of all, I have this HTML code:

<div id="Layer-69" class="nav-bar nav-links"  >
  <a href="#" title="NOSOTROS" class="nosotros">NOSOTROS</a>
</div>
<div id="nosotros-menu">
  <ul>
    <li><a href="#" title="Quienes Somos?">Quienes Somos?</a></li>
    <li><a href="#" title="Reseña Historica">Reseña Historica</a></li>
    <li><a href="#" title="Nuestra Filosofia">Nuestra Filosofia</a></li>
  </ul>
</div>

And this jQuery code:

$(document).on('ready', function(){
   $('.nosotros').on('mouseover', function(){
        $('#nosotros-menu').slideDown('fast');
   });
});

What I have right now is that when I put the mouse over the "nosotros" a element, it shows the "nosotros-menu" div element. Now, what I want to do is that when the pointer leaves the "nosotros-menu" div, this div just hide, but I can't do it, I don't know how. please help me, thank's.

Answer 1

try this:

$(document).on('ready', function(){
   var timeout = 0;
   $('.nosotros').hover(function(){
        $('#nosotros-menu').slideDown('fast');
   },function(){
         timeout = setTimeout(hideMenu,300);
    });

   $("#nosotros-menu").hover(function(){
       clearTimeout(timeout);
   },function(){
       hideMenu();
   });
});

function hideMenu(){
    $("#nosotros-menu").slideUp('fast');
 }

Answer 2

Instead of using the mouseover event, bind to the hover event. With hover, you supply two functions, one for when the user's mouse enters, and one for when it leaves, and jquery wires it up for you. Inside the first function, do the slideDown action, then in the second one, the slideUp action.

Answer 3

You can do just like that:

$(document).on('ready', function(){
   $('.nosotros').hover(
     function () {
       $('#nosotros-menu').slideDown('fast');
     }, 
     function () {
       $('#nosotros-menu').slideUp('fast');
     }
   );
});