jQuery check if mouse is over
<p>I need help making jQuery check if mouse is over an element. </p>

<p>I need this to work like the navigation in: <a href="http://mashable.com" rel="nofollow">http://mashable.com</a>.</p>

<p>I have this: </p>

<pre><code>&lt;div id="main_nav"&gt;
  &lt;ul&gt;
&lt;li href="#tab1"&gt;Nav Tab 1&lt;/li&gt;
&lt;li href="#tab2"&gt;Nav Tab 2&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="main_nav_expansion"&gt;
  &lt;ul class="navtab" id="tab1"&gt;
    &lt;li&gt;Submenu Title Here
   &lt;ul&gt;
     &lt;li&gt;Sublink Option&lt;/li&gt;
     &lt;li&gt;Sublink Option&lt;/li&gt;
   &lt;/ul&gt;
&lt;/li&gt;
  &lt;/ul&gt;&lt;!-- end navtab 1 --&gt;
  &lt;ul class="navtab" id="tab2"&gt;
    &lt;li&gt;Submenu Title Here
   &lt;ul&gt;
     &lt;li&gt;Sublink Option&lt;/li&gt;
     &lt;li&gt;Sublink Option&lt;/li&gt;
   &lt;/ul&gt;
&lt;/li&gt;
  &lt;/ul&gt;&lt;!-- end navtab 2 --&gt;
 &lt;/div&gt;
</code></pre>

<p>I wrote this jQuery, but I can't get the ul.navtab to stay open when you move you mouse out of either "Nav Tab 1" or "Nav Tab 2". I tried to write conditional statements within the callback function to check if mouse is over element, but it doesn't work.</p>

<p>This is the jQuery code:</p>

<pre><code>jQuery(document).ready(function(){

   $('ul.navtab').hide();

   $('#main_nav ul li').hover(function(){
   $('#main_nav ul li.active').removeClass('active');
   $(this).addClass("active");
   var activeNavTab = $(this).attr("href");
   $(activeNavTab).addClass("active").slideDown();
   },function(){
   if($("ul.navtab").is(":hover")){
   $("ul.navtab").show();
   }else{
      $("ul.navtab").slideUp();
      $('#main_nav ul li.active').removeClass('active');
   }
});
</code></pre>
