Jquery mouseover/out issue
<p>Alright I made this nav, that has a sub nav on certain locations. Currently the trigger is the main menu item. Now this works perfectly for all purposes of showing the menus however. When I mouseout off the main menu item the submenu item closes out. I tried putting it on a interval to give it a second to catch an instance of someone possibly going over the submenu item but that in itself causes problems specially if the person goes over another menu in the mean time. I've bricked myself in and can't think of a way to handle this better.. so here is the existing code:</p>

<pre><code>var menuTimeout = '';
$('.nav_click').bind({
mouseover: function(){
if($(this).hasClass('submenus') == true){
var whichMenu = $(this).attr('id');
var displayMenu = '';//yes its blank for a reason
if(whichMenu == 'navi2'){displayMenu = 'menu1';}
if(whichMenu == 'navi3'){displayMenu = 'menu2';}
if(whichMenu == 'navi4'){displayMenu = 'menu3';}
if(whichMenu == 'navi5'){displayMenu = 'menu4';}
if(displayMenu != '')
{
var leftOffset = ($(this).position().left-35);
var topOffset = ($(this).offset().top+$(this).height()+10);
$('#'+displayMenu).css({"display":"block", "position":"absolute", "left":leftOffset+"px", "top":topOffset+"px"});
}
}
var menuitem = $(this).attr('id');
if(menuitem == "navi1"){$(this).css({"background-position":"0 -63px"});}
if(menuitem == "navi2"){$(this).css({"background-position":"-100px -63px"});}
if(menuitem == "navi3"){$(this).css({"background-position":"-230px -63px"});}
if(menuitem == "navi4"){$(this).css({"background-position":"-420px -63px"});}
if(menuitem == "navi5"){$(this).css({"background-position":"-524px -63px"});}
if(menuitem == "navi6"){$(this).css({"background-position":"-638px -63px"});}
if(menuitem == "navi7"){$(this).css({"background-position":"-737px -63px"});}
},
mouseout: function(){
if($('.submenublock').is(":visible") == true){menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 1500);}
var menuitem = $(this).attr('id');
if(menuitem == "navi1"){$(this).css({"background-position":"0 0"});}
if(menuitem == "navi2"){$(this).css({"background-position":"-100px 0"});}
if(menuitem == "navi3"){$(this).css({"background-position":"-230px 0"});}
if(menuitem == "navi4"){$(this).css({"background-position":"-420px 0"});}
if(menuitem == "navi5"){$(this).css({"background-position":"-524px 0"});}
if(menuitem == "navi6"){$(this).css({"background-position":"-638px 0"});}
if(menuitem == "navi7"){$(this).css({"background-position":"-737px 0"});}
},
click: function(){
window.location = $(this).attr('rel');
}
});
$('.submenublock ul').bind({
mouseover: function(){
clearInterval(menuTimeout);
},
mouseout: function(){
menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 500);
}
}); 
</code></pre>

<p>and here is the site it resides on currently for the sake of seeing the mess in action.
<a href="http://kansasoutlawwrestling.com/" rel="nofollow">http://kansasoutlawwrestling.com/</a></p>

<p><strong>Edit</strong></p>

<p>Heres a JS fiddle version
<a href="http://jsfiddle.net/WveqN/" rel="nofollow">http://jsfiddle.net/WveqN/</a></p>

<p><strong>Edit 2</strong>
Main reason I am veering away from the CSS option is because there is multiple mouse over/out enter/leave events happening from the main menu item changing to another version via sprite to the menu popping up if there is one to pop up.</p>
