jQuery submenu displays hidden div, but disappears when I hover the div
<p>I am attempting to build a jQuery sub menu dropdown. </p>

<p>My code works fine if I hover the menu link button, enter the submenu and exit.</p>

<p>However, if I hover the menu link button, and then another menu botton, the submenu never disappears.</p>

<p>I would like it to... </p>

<ol>

<li> Show the submenu when you hover the link button. </li>
<li> Continue to show the active button link and submenu while you hover either one. </li>
<li> Shut off both the active menu button and the submenu when you exit the button or the submenu (but not when you exit the submenu to enter the active button). </li>
</ol>

<p>I hope that makes sense!</p>

<p>Here is my HTML:</p>

<pre><code>&lt;ul class="mainmenu"&gt;
    &lt;li&gt;&lt;a href=""&gt;normal&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menudrop"&gt;&lt;a href=""&gt;dropdown&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="submenu"&gt;
    &lt;h3&gt;Aliquam id libero&lt;/h3&gt;
    &lt;ul&gt;
       &lt;li&gt;&lt;a href=""&gt;Vestibulum in purus&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=""&gt;Lectus id vestibulum&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=""&gt;Suspendisse posuere&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=""&gt;Nam ut bibendum&lt;/a&gt;&lt;/li&gt;                                  
   &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And here is the jQuery I'm using:</p>

<pre><code>$(function() {  
$(".menudrop").hover(
    function () {
        $(".submenu").show();
    }       
 );         
$(".submenu").hover(
    function () {
        $(".menudrop").addClass("active");
        $(".submenu").show();
    },
    function () {
        $(".menudrop").removeClass("active");
        $(".submenu").hide();
    }
 );         
});
</code></pre>

<p>Also, I initially set the submenu to display none in the CSS.</p>

<pre><code>.submenu {
position: absolute;
z-index: 2000;
width: 970px;
display: none;
}
</code></pre>
