Dropdown Menu IE7 Problem (Menu Hinter Content)?

[dalton]

Hallo,

ich habe ein Problem und zwar hab ich ein Dropdown Menu erstellt für meine Typolight seite, es funktioniert alles wunderbar im Firefox,Chrome,IE8 aber bei IE7 wird das Dropdown hinter dem Content angezeigt und ich habe fast alles schon probiert.. aber es tut sich nichts.

Bin auch die Themen von diesem Forum durchgegangen, aber es hat nicht geholfen und hoffe jemand kann mir helfen?

Hier mal das NAV CSS:

/* ----------------Main Navigation Horizontal---------------------- */
#navigation {
	background: url(img/bg_top.jpg) no-repeat;
	height: 46px;
	
}
#navigation .mod_navigation ul ul {
  margin-top: 1px;
   margin-left: -1px;
 
}
	
#navigation .inside {

	border-bottom: 1px solid #dddddd;
	margin-left: 17px;
	margin-right: 17px;
}



#navigation .mod_navigation ul {
	position:absolut;
}





#navigation .mod_navigation ul.level_1 {
	margin-left: -10px;
}


#navigation .mod_navigation ul.level_1 li {
	float: left;
	padding: 3px 10px 10px 10px;
	border-right: 1px solid #dddddd;
	text-decoration: none;
	
	
}


#navigation .mod_navigation ul.level_1 ul.level_2 li {
	width:238px;
	border-right:none;
	clear:both;
	padding:6px 10px;
	background:#fff;
	
border:1px solid #CCCCCC;

text-align:left;
opacity:1;
margin-bottom:1px;
}

#navigation .mod_navigation ul.level_1 ul.level_2 li:hover {
	opacity:1;
	background:#e8e8e8;

}

#navigation .mod_navigation ul.level_1 ul.level_2 li a {


}




#navigation .mod_navigation li ul {
	margin: 0px;
	padding: 0px;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
	z-index: 999;
	padding-top:20px;
}





#navigation .mod_navigation li:hover ul {

	display: block;
	

}




#navigation .mod_navigation ul.level_1 li a {
	text-decoration: none;
}

#navigation .mod_navigation ul.level_1 li a:hover {
 text-decoration: underline;
	color: #d2242b;
}


#navigation .mod_navigation li li { 
   float: left; 
   clear: both; 
   z-index: 999;
}


#navigation .mod_navigation li li a {
	height:1%;
	
}


 .clearb {
/* needed for some browsers */
	clear: both;
}




/* ----------------Main Navigation Horizontal END---------------------- */

Und Hier noch ein Teil denke mal den Wichtigen Teil vom Basic Nav:

#container {
	border-left: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
	height: 100%;
	overflow: hidden;
	padding-top: 15px;
	}
	
	
#container .inside {
	margin-left: 17px;
	margin-right: 17px;
}
	

#bgbottom {
	background: url(img/bg_bottom.jpg) no-repeat bottom left;
	height: 21px;
}


#header .inside .mod_customnav {
	float: right;
	margin-top: 15px;
}


#header .inside .mod_customnav ul.level_1 li {
	float: left;
	padding: 1px 5px 1px 5px;
	border-left: 1px solid #CCC;
}

#header .inside .mod_customnav ul.level_1 li a {
    text-decoration: none;
}

#header .inside .mod_customnav ul.level_1 li a:hover {
    text-decoration: underline;
	color: #d2242b;
}






div#banner {
	border-left: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
	height: 100%;
	overflow: hidden;
	
}

div#banner .inside {
padding: 0px 0px 10px 17px;
}

div#banner .inside #show1 {
	height: 290px;
}

Kann mir jemand helfen?

MFG

nico

[stefan-at-work]

das Zauberwort "z-index" sollte helfen

[dalton]

Leider funktioniert dies auch nicht hab das schon in paar varianten Probiert :S.

[stefan-at-work]

#navigation .level_1 ul {
z-index: 999;
}

[dalton]

Habs hingekriegt mit:

#navigation {
z-index:999;
position:relative;
text-align:left;
}

Danke .

mfg nico