Javascript drop down menu affected by flash page content

Hi everyone, i wonder if anyone can help with this problem.

Basically, i have a multi-level drop down menu bar at the top of my web page which uses javascript to add a css class to the menu to display the appropriate links when the main tab is hovered over. Before i go any further – here’s the JS code that i’m using:

[CODE]

sfHover = function()
{
var sfEls = document.getElementById(“mainlevelmainnav”)
.getElementsByTagName(“LI”);
for (var i=0; i < sfEls.length; i++)
{
sfEls[i].onmouseover=function()
{
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(” sfhover\b”), “”);
}
}
}
if (window.attachEvent){
window.attachEvent(“onload”, sfHover);
}

[/CODE]

This code works great cross browser and on all web pages APART from those which contein flash content. I have a flash based gallery on one of my web pages and. Before the user inetracts with the flash gallery (i.e. clicks on it/a photo) the menu works fine. However as soon as the lash content has been clicked on, the menu behaves strangely. The drop down menu items still display, but the ‘onmouseout’ function doesn’t seem to work as the drop down menu items don’t retract – they stay on the screen. This means that you can hover over all menu tabs, and display all menu items at once accross the whole menu and they all just stay on the screen and don’t retract back up as they should.

Strangely, this appears to be an IE issue and is not present in Firefox/safari etc.

I would really appreciate some help as i’m pulling my hair out here!

Thanks!

Also in #JavaScript _↴