This is a common problem, and there are 2 different solutions, depending on what browsers you want to support.
Prior to IE 5.5, you just had to hide the 'windowed' elements (flash, select boxes, etc) by checking all such elements in the page and determining if they overlap.
Starting with IE 5.5, though, iframes have the strange property that they can go over 'windowed' elements AND under normal elements. So, basically, you have to put an iframe underneath the menu, and over the flash element.
Here's some code that I use to do the trick. You should be able to modify it to work with your menus. The first argument is the div tag (or whatever) that contains your menu, and the second argument is a bool that specifies whether the item is becoming appearing (1) or dissappearing (0). Also, you must call this function AFTER the menu element had been displayed, because it needs to know the physical size of the element.
Hope it helps.
//allows DIV tags to show over SELECT boxes
// various browsers have trouble with this
function hideSelectBoxes(el, on)
{
if ((HM_IE && !HM_Mac && !HM_Opera) || HM_Safari)
{
//get menu dimensions
var p = getAbsolutePosition(el);
if (HM_IE_version >= 5.5)
{
//in this case, we create an IFRAME that sits just under the div tag
//this is done because IE 5.5+ exibits the strange behaviour that
//an iframe can be displayed over a select box AND under a div tag
//but a div tag, by itself, can never go over a select box
//so, by layering them like this, the menu is properly displayed
var iframeID = el.id+"_hide_iframe";
var myIframe;
if (myIframe = document.getElementById(iframeID))
{
myIframe.style.display = (on) ? "" : "none";
myIframe.style.left = p.x;
myIframe.style.top = p.y;
myIframe.style.width = el.offsetWidth;
myIframe.style.height = el.offsetHeight;
}
else //create the iframe
{
myIframe = document.createElement("IFRAME");
myIframe.setAttribute("id", iframeID);
myIframe.style.border=0;
myIframe.style.position="absolute";
myIframe.style.left=p.x;
myIframe.style.top=p.y;
myIframe.style.width=el.offsetWidth;
myIframe.style.height=el.offsetHeight;
myIframe.style.zIndex=el.style.zIndex-1;
document.body.appendChild(myIframe);
}
}
else //IE version is below 5.5
{
//in this case, the browser will not allow a div to be displayed
//over a select box no matter what, so we simply grab all the
//select boxes and hide them if there is overlap with the new menu
//or show them if the menu is closing
//get menu dimensions
var HM_EX1 = p.x;
var HM_EX2 = el.offsetWidth + HM_EX1;
var HM_EY1 = p.y;
var HM_EY2 = el.offsetHeight + HM_EY1;
//now get all "trouble" elements
var tags = new Array("applet", "iframe", "select");
for (var k=0; k<tags.length; k++ )
{
var elems = document.getElementsByTagName(tags[k]);
var elem = null;
for (var i=0; i<elems.length; i++)
{
elem = elems;
//get elem dimensions
p = getAbsolutePosition(elem);
var HM_CX1 = p.x;
var HM_CX2 = elem.offsetWidth + HM_CX1;
var HM_CY1 = p.y;
var HM_CY2 = elem.offsetHeight + HM_CY1;
if ( !((HM_CX1 > HM_EX2) || (HM_CX2 < HM_EX1) || (HM_CY1 > HM_EY2) || (HM_CY2 < HM_EY1)) && !isDescendant(el, elem) )
{
//elements overlap, hide or show elem
if (on)
{
//save old value
elem[el.id] = elem.style.visibility;
//hide element
elem.style.visibility = "hidden";
}
else
{
//restore old value
elem.style.visibility = elem[el.id];
}
}
}
}
}
}
}
// finds position on page, even for inline elements
function getAbsolutePosition(elem)
{
var r = { x: elem.offsetLeft, y: elem.offsetTop };
if (elem.offsetParent)
{
var tmp = getAbsolutePosition(elem.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}
