Solved: java script menu hiding behind the flash screensaver-php

I had the same situation you have and resolved it this way:

I have a web page that has some HTML links, buttons and other stuff on it and I also have a flash menu that sits at the top of the page. Even though the flash menu was closed, the DIV it resided in, was on top of the other HTML DIV so the HTML stuff was inaccessible. So I set up my page like this:

I have a DIV called "top" which holds my Flash file. My flash file extends full screen from left to right and is 304 pixels high. This is the set up for that DIV:

<div id="top" style="position:absolute; left:0px; top:0px; width:100%; height:304px; z-index:95">

Now I have another DIV called "middle_content" for my HTML content that I set up like this:

<div id="middle_content" style="position:absolute; left:0px; top:105px; width:100%; margin:0px auto; border:none; z-index:99" >

Then I simply include my HTML in that div as you would normally do.

I know not everyone uses FlashObject for displaying their Flash content, but if you don't you can still use this method. Also if you don't use FlashObject, I highly recommend it. At any rate, I use Flash object to put my flash object into the "top" DIV like this:

var fo = new FlashObject("/page_top.swf", "top", "100%", "304", "9", "#ffffff");
fo.addParam("quality", "high");
fo.addParam("movie", "page_top.swf");
fo.addParam("loop", "false");
fo.addParam("wmode", "transparent");
fo.addParam("scale", "noscale");
fo.addParam("salign", "left");
fo.write("top");

Now inside my Flash script, I simply have something that listens for my menu buttons. Whenever the menu buttons are rolled over (which makes them drop down) I run this little piece of code:

ExternalInterface.call("move_forward");

and when they roll off the button, I call

ExternalInterface.call("move_backwards");

What that does is call a javascript function on my HTML page which tells the 2 DIVS that overlap to switch places and put the one I want at the time on top. So when the Flash menu is exposed, I call "move_forward". This places the Flash DIV ("top") on top of the HTML DIV ("middle_content"). The move_backwards script does just the opposite and places the Flash DIV behind the HTML one. It works flawlessly for me. It should work for you also. This is the javascript for moving the DIVS:

function move_forward() {
document.getElementById('top').style.zIndex = 99;
document.getElementById('middle_content').style.zIndex = 97;
}

function move_backwards() {
document.getElementById('top').style.zIndex = 98;
document.getElementById('middle_content').style.zIndex = 99;
}

Of course this works for IE and may have to be tweaked to work with other browsers.

That's it. Once all these elements are in place everything should work the way you need it to.