Menu bar comes in front of popup window?

[evlj]

Hi there guys, i made an popup window with some content on it, all stuff being shaded but menu bar tabs... (The best thing to understand me is to take a look at images below)

 

Image one (without popup)

 

Image two (with popup)

 

And the css of menu bar is:

 

.sf-menu, .sf-menu * {
margin:			0;
padding:		0;
list-style:		none;
}
.sf-menu {
line-height:	1.0;
}
.sf-menu ul {
position:absolute;
top:-999em;
width:10em;
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility:inherit;
}
.sf-menu li {
float:left;
position:absolute;
}
.sf-menu a {
display:block;
position:relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:0;
top:2.5em; 
z-index:99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:10em;
top:0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:10em; 
top:0;
}

#top_btns{ background:transparent url(../multimedias/images/header/top_btn_bg.png);
width:950px; height:37px; padding:8px 0px 0px 0px; float:left; margin:15px 0px 0px 0px; color:#FFF;}

.sf-menu li ul {
float:			center;
margin-bottom:	1em;
}
.sf-menu a {
padding: 		.75em 1em;
}
.sf-menu li ul a {
border-left:	1px solid #fff;
border-top:		1px solid #fff;
padding: 		.75em 1em;
text-decoration:none;
}
.sf-menu li ul a, .sf-menu ul li a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:			#13a;
}
.sf-menu li ul li {
background:		#000000;
opacity:0.9;
filter: alpha(opacity = 90);
}
.sf-menu li li {
background:		#000000;
}
.sf-menu li li li {
background:		#000000;
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:	url(../multimedias/images/menu/shadow.png) no-repeat bottom right;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "../multimedias/images/pngFix/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-sub-indicator{ display:none;}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}

#top_btns ul.sf-menu{ list-style-type:none; float:left; margin:0px; text-transform: uppercase; z-index:100}
#top_btns ul li{ list-style-type:none; float:left;}
#top_btns ul li.top{ padding-right:16px;}
#top_btns ul li a{ color:#FFF; text-decoration:none;}
#top_btns ul li a:hover{ color:#ffa200; text-decoration:none;}

 

I'm sorry if this is a wrong forum.

 

P.s. thanks in advance!

[cssfreakie]

well clearly something is wrong in terms of the z-index. Do you have an online example. much easier fixing these types of things.

[evlj]

Yes sir, i have one:

 

http://www.360accounts.com/index3.html

[cssfreakie]

on line 128 of your style sheet add the property I commented on:

 

#top_btns ul.sf-menu {
    float: left;
    list-style-type: none;
    margin: 0;   
    text-transform: uppercase;
    z-index: 100;
    position: relative; /* <---------  I added this */
}

 

The z-index property is meant for objects with a position other than static, so if you just give something a z-index it wont work, because they are static objects by default.

 

if this solved it for you please mark it solved

 

cssfreakie

[evlj]

Thank you kind sir! Solved!