title: show/hide dropdown menu on hover/mouseout using jquery
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;div id="navbar"&gt;
    &lt;ul&gt;
      &lt;li&gt;tab1&lt;/li&gt;
      &lt;li&gt;tab2&lt;/li&gt;
      &lt;li id="moretab"&gt;more&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt; 
  &lt;div id="categories"&gt;
    &lt;ul&gt;
      &lt;li&gt;cats&lt;/li&gt;
      &lt;li&gt;dogs&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  $("#moretab").hover(function(){
    $("#categories").css("visibility","visible"); 
  });
  $("#categories").mouseout(function() {
      $("#categories").css("visibility","hidden"); 
  });
  </code></pre>