achterbahnfreak
Erfahrenes Mitglied
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:
HTML Code:
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:
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:
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>