jQuery submenu displays hidden div, but disappears when I hover the div

Question

I am attempting to build a jQuery sub menu dropdown.

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

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

I would like it to...

1. Show the submenu when you hover the link button.
2. Continue to show the active button link and submenu while you hover either one.
3. 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).

I hope that makes sense!

Here is my HTML:

<ul class="mainmenu">
    <li><a href="">normal</a></li>
    <li class="menudrop"><a href="">dropdown</a></li>
</ul>

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

And here is the jQuery I'm using:

$(function() {  
$(".menudrop").hover(
    function () {
        $(".submenu").show();
    }       
 );         
$(".submenu").hover(
    function () {
        $(".menudrop").addClass("active");
        $(".submenu").show();
    },
    function () {
        $(".menudrop").removeClass("active");
        $(".submenu").hide();
    }
 );         
});

Also, I initially set the submenu to display none in the CSS.

.submenu {
position: absolute;
z-index: 2000;
width: 970px;
display: none;
}

Answer 1

when you hover the .menudrop it activates the submenu, however leaving it does not deactivate the submenu, so you could go to normal and have the menu open.

when you hover the submenu it gets active and hides on leave but if you try to go to normal the .menudrop shows it again

you can understand it better if you add css

.mainmenu li {display: inline}

better to put the submenu inside the .menudrop and use the menu drop to show/hide on .hover enter/leave. eventually you will end up using some extra div's for format purposes.

see fiddle here: http://jsfiddle.net/m2Gfe/2/

still there's a glitch between the menu's when mouse transition from .menudrop to .submenu they might hide the submenu, but that could be solved by padding and overlap a bit