jquery menu animates out when hovered over, however collapses when travel between elements...help

The jquery menu is programmed to animate out on mouseover and collapse on mouseout. However this is a problem while the user is hovering over the items as when the user reaches the edge of one of the boxes it no longer counts it as having the mouse over the whole menu. There is no padding / margin or border on any of the images. It is a 2 x 3 grid of squares so all fits together nicely. Here is the jquery code which relates to each list element.

$("li.menu3").mouseover(function(){

$("ul.inactive3").stop().animate({width: "500px", height: "150px"}, "fast", function(){ $("ul.inactive3").stop().animate({width: "500px", height: "300px"}, "fast");

});

});

$("li.menu3").mouseout(function(){

$("ul.inactive3").stop().animate({width: "500px", height: "150px"}, "fast", function(){ $("ul.inactive3").stop().animate({开发者_C百科width: "0px", height: "0px"}, "fast");

});

I tried overcoming this by simply using one image and placing several image maps over the top, however this presented new problems of the mouseover not working in chrome.

Any help would be greatly appreciated.,

Thanks, Mike

I figured out the answer, using a jquery plugin called hoverintent.

the link is here incase anyone else comes across the same issue

http://cherne.net/brian/resources/jquery.hoverIntent.html