jQuery drop down menus

jQuery drop down menus

I am working on jquery plugin for building large menus. You can see a better explanation (if you care) at  http://www.danvega.org/blog/index.cfm/2010/2/13/My-first-jQuery-plugin-Big-Ass-Menu

What it boils down to is when you hover over a main menu item the sub menu is shown.

<div id="menu">
<ul>
<li><a id="home" href="basic.html">Home</a></li>
<li>
<a id="about" href="#">About</a>
<div>
About Sub Menu
</div>
</li>
<li>
<a id="products" href="#">Products</a>
<div>
Products Sub Menu
</div>
</li>
<li><a id="service" href="#">Service</a></li>
<li><a id="support" href="#">Support</a></li>
<li><a id="contact" href="#">Contact Us</a></li>
</ul>
</div>

Everything is working great except for one small bug. 
  1. When you hover over a menu item the sub menu is shown, when you move over the sub menu the main navigation item is still active, so far so good. 
  2. If you move out of the sub menu area the sub menu is hidden and the active class is removed from the main navigation, again so far so good. 
  3. This is the bug - When you hover over an item and then move to the sub menu and then move back to that same navigation item the sub menu is hidden. This makes complete sense to me, what doesn't make sense is if your hovering over a main navigation (and the hover event is called) why doesn't it show the sub menu again? 
My guess is because at that time the the sub menu is not really hidden yet. I have tried a variety of things to fix this but I just can't come up with an answer. Here is the complete code to my plugin, but really the focus is on the hover events for the menuid and submenu items. If someone wants the complete code with demos just let me know.

/*
 * BigAssMenu jQuery Plugin
 * 
 */
(function($){
$.fn.extend({
BigAssMenu: function(options){
var defaults = {
activeClass: 'active',
submenuClass: 'submenu',
fade: 400,
height: 0
}
var options = $.extend(defaults,options);
return this.each(function(){
// Assign current element to variable
var obj = $(this);
// the main menu id
var menuid = obj[0].id;
// get only direct decendents of our obj,ul
var menuItems = $('> ul > li',obj);
var activeClass = options.activeClass;
var submenuClass = options.submenuClass;
var animateInDelay = options.fade;
var animateOutDelay = options.fade;
var submenuHeight = options.height;
// loop over every menu item
menuItems.each(function(index,value){
// the id of the top level menu item
var menuid = $(this).find("a")[0].id;
var submenu = $("#" + menuid).next();
var hide = false;
// hide all sub menus
$(submenu).hide();
// add a sub menu class to all sub menus 
$(submenu).addClass(submenuClass);
// if submenuHeight is > 0 set the height for all sub menus
if(submenuHeight > 0) {
$(submenu).css('height',submenuHeight);
}
// does the sub menu have an include
var include = $(submenu).attr('include');

// when you hover over the main menu item
$("#" + menuid).hover(function(){
if(include){
load(menuid,include);
}
// fade in the sub menu
$(submenu).fadeIn(animateInDelay);
// change the class of the menu item to create that on affect
$(this).addClass(activeClass);
},function(){
// when you move off the menu hide the sub menu
hide = setTimeout(function(){
$(submenu).fadeOut(animateOutDelay);
});
// remove the active class from the menu item
$("#" + menuid).removeClass(activeClass);
});
// make sure the sub menu does not disappear after you move off the main navigation item
$(submenu).hover(function(){
if(hide){
clearTimeout(hide);
$(submenu).fadeIn(animateInDelay);
$("#" + menuid).addClass(activeClass);
}
},function(){
// if you move your mouse out of the sub menu div, the div fades out and removes the active class
hide = setTimeout(function() {
$(submenu).fadeOut(animateOutDelay);
});
$("#" + menuid).removeClass(activeClass);
});
});
});
}

});
function load(menu,include){
$.ajax({
url: include,
success: function(data){
$("#" + menu).next().html(data);
},
error: function(request){
var status = request.status;
var e = "";
switch(status){
case 404:
e = "The template '" + include + "' could not be found";
break;
default:
e = "Some error I have not accounted for just happened.";
}
$("#" + menu).next().css('color','red').html(e);
}
});
}
})(jQuery);