✔ Menü bei Abdunkeln in den Vordergrund

[achterbahnfreak]

Hi,

ich habe ein Problem und hoffe ihr könnt mir helfen:

Ich habe es so eingestellt, dass sich unterhalb der Navigation ein contentbereich öffnet und sich gleichzeitig der Hintergrund auf der gesamten Seite abdunkelt. Wie bekomme ich aber das Menü über den abgedunkelten Bereich, wenn sich der Contentbereich unterhalb der Navigation öffnet.

CSS Code:

.menu {
	margin: 0 auto;
	width: 1000px;
	height: 34px;
	background: url(../img/background_menu.jpg);
	margin-top: 9px;
	position: static;
	z-index: 99;
	-moz-border-radius-topleft:5px;
	-webkit-border-radius-topleft:5px;
	-khtml-border-radius-topleft:5px;
	border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-radius-topright:5px;
	-khtml-border-radius-topright:5px;
	border-radius-topright:5px;
}

ul.nav {
	margin-left: 12px;
	float: left;
}

ul.nav li {
	float: left;
	list-style: none;
	line-height: 34px;
}

ul.nav li a{
	font-weight: 100;
	color: #fff;
	font-size: 16px;
	padding: 8px 9px;
}

ul.nav li a:hover {
	background: url(../img/background_menu_hover.jpg);
	padding: 8px 9px;
	text-decoration: none;
}

ul.nav li .background_black {
	display: none; 
}

ul.nav li:hover .background_black {
	display: block;
	position: fixed;
	background: #000;
	opacity: 0.8;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

ul.nav li:hover .background_black:hover {
	display: none;
}

ul.nav li .nav_content {
	position: absolute;
	z-index: 2;
	display: none; 
}

ul.nav li:hover .nav_content {
	display: block;
	position: absolute;
	background: #fff;
	height: 238px;
	width: 915px;
	z-index: 3;
}

HTML Code:

<div class="menu">

					<ul class="nav">
						<li><a href="#">Menu0</a>
						
						<div class="clear"></div>
						<div class="background_black">
						
						</div>
						<div class="nav_content">
						<div class="lorem">
							Test
						</div>
						</div>
						</li>
						<li>Menu1</li>
						<li>Menu2</li>
					
					</ul>

 

[Slin61]

Formatiere bitte den Code mit [ HTML ] und [ code=css ]. Ich kann so gar nichts daraus lesen

 

[SpiceLab]

[...] Wie bekomme ich aber das Menü über den abgedunkelten Bereich [...]

CSS Code:

.menu {
	...
	position: static;
	z-index: 99;
	...
}

Eine z-index-Regel funktioniert grundsätzlich nicht in Verbindung mit position:static, denn dieser Eigenschaftswert entspricht der Normaleinstellung (ohne position-Deklaration) mit keiner speziellen Positionierung und einem normalen Elementfluss.

Stattdessen ist eine der drei Positionsarten relative, absolute oder fixed zu wählen, damit sich der Menübereich in der gewünschten Schichtposition befindet.