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({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
