show/hide dropdown menu on hover/mouseout using jquery
<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>
