title: jQuery: Dropdown navigation slideDown and slideUp
body: <p>I have a dropdown navigation. I want the dropdown menu to slideDown when the user hovers the "a" tag, and slideUp when the mouse has left the dropdown OR the "a" tag. The problem is that, if I write the code like this:</p>
  
  <pre><code> $("#pageBottomNav ul li a").hover(function () {
      $(this).parent().children("ul#subNav").slideDown();
  }, function() {
    $(this).parent().children("ul#subNav").slideUp();
   }
  );
  </code></pre>
  
  <p>The dropdown shows only when I am hovering the "a" tag and when i try to mouse over the dropdown menu it slides up again, because of the mouseleave event of the upper code.</p>
  
  <p>On the other hand, if I write my code like this:</p>
  
  <pre><code> $("#pageBottomNav ul li a").mouseenter(function () {
      $(this).parent().children("ul#subNav").slideDown();
  });
  
  $("#pageBottomNav ul li ul#subNav").mouseleave(function () {
      $(this).slideUp();
  });
  </code></pre>
  
  <p>The dropdown opens correctly, but it closes only if the user has hover on it. However, if the user has moused over the "a" tag and hasn't moused over the #subNav, the dropdown won't close.</p>
  
  <p><strong>Edit:</strong>
  The problem was I handled the hover event of the anchor tag, while I should do the same for its parent - the list item (li) tag. I changed them and everything worked fine. Look at the <strong>code below</strong>:</p>
  
  <pre><code> $("#pageBottomNav ul li").hover(
      function () {
          $(this)
              .find("ul")
          .stop(true, true)
          .slideDown("easeInQuart");
  },
      function () {
          $(this)
          .find("ul")
          .stop(true, true)
          .slideUp("easeInQuart");
  });
  </code></pre>