Grey out CSS Superfish menus - html

Question

I wrote a script that when certain buttons are clicked on the webpage, the entire page gets greyed out until the user clicks either 'yes' or 'no'. This seemed simple enough, but I'm running into conflicts with the menus that I am using from Superfish. The menus are still able to be accessed when the rest of the page is greyed out.
I troubleshot it down to the fact that the superfish css scripts use a series of
Position: relative
or
Position: absolute
So I figured that I will need to either figure out why my grey covering box isn't working or hard code locations for my navbar into the source. My concern is that if I do that, then won't the setup be only to my resolution?
Is there something that I missed on my grey box coding that would make this happen?
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
I don't have much experience with css. I looked for a few hours for a solution yesterday, but couldn't find anything related to the problem I am experiencing.
Thanks.

Answer 1

You need to set menu block z-index lower then overlay block z-index.
.someClass
{
position: relative;
z-index: 2;
}

Answer 2

I ran into problems trying to use the setting below.
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
z-index:100
}
I figured out that z-index has to be set immediately after position is declared, or else it won't work at all.
#cover {
display:none;
position:absolute;
z-index:100
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}