show/hide dropdown menu on hover/mouseout using jquery

Question

so i have a simple navbar with a dropdown menu for when a user hovers on the more tab. i want to hide the dropdown menu when the user mouses out of the categories div.

problem is that when the user mouses into a ul li, the dropdown closes. how can i set it so that the function ignores the ul li within the categories div. tried categories > * but didn't work.

<div id="navbar">
  <ul>
    <li>tab1</li>
    <li>tab2</li>
    <li id="moretab">more</li>
  </ul>
</div> 
<div id="categories">
  <ul>
    <li>cats</li>
    <li>dogs</li>
  </ul>
</div>

$("#moretab").hover(function(){
  $("#categories").css("visibility","visible"); 
});
$("#categories").mouseout(function() {
 $("#categories").css("visibility","hidden"); 
});

Answer 1

The easiest answer is how you would do it without jQuery: put the dropdown in the triggering element (e.g. dropdown list in a list item in the navigation list).

If you want something less straightforward, mouseleave might help.

Answer 2

$("#moretab").mouseenter(function(){
  $("#categories").show(); 
});

$("#categories, #moretab").mouseleave(fucntion(){
  $("#categories").hide(); 
});