DropDown-Menü wird nicht über #container angezeigt
Hallo, ich habe ein Problem: und zwar bekome ich es nicht hin, dass mein DropDown-Menü über dem #container div angezeigt wird.
Hier mal ein Link zur Seite:
-
Die grünen Punkte sind die level_2 und level_3 Punkte die eigentlich über dem Inhalt angezeigt werden sollten.
Das Menü habe ich nach folgender Anleitung aufgebaut:
http://www.ourtuts.com/create-a-drop...tml5-and-css3/
Das ein- und ausblenden habe ich mal deaktiviert, das funktioniert soweit richtig. Ich hoffe mir kann jemand helfen. Hier relevante Code:
HTML-Code:
/* Dropdown Menu
---------------------------------------------------------------------*/
nav {
position: relative;
width: 100%;
margin: 0 auto;
display: block;
}
nav ul.level_1 {
margin: 0 auto;
position: relative;
float: left;
width: 100%;
}
nav ul.level_1 li {
display: inline;
position: relative;
float: left;
width: 16.6666667%;
}
nav ul.level_1 li a,
nav ul.level_1 li span {
display: inline-block;
width: 100%;
border: none;
font-size: 1rem;
position: relative;
-webkit-transition:color 0.2s linear, background 0.2s linear;
-moz-transition:color 0.2s linear, background 0.2s linear;
-o-transition:color 0.2s linear, background 0.2s linear;
transition:color 0.2s linear, background 0.2s linear;
}
/* Drop-Down Navigation */
nav ul.level_1 li:hover > ul {
visibility: visible;
opacity: 1;
}
nav ul.level_2,
nav ul.level_3 {
/*visibility: hidden;
opacity: 0;*/
position: absolute;
z-index: 99999;
background: yellow;
width: 100%;
-webkit-transition:color 0.2s linear, background 0.2s linear;
-moz-transition:color 0.2s linear, background 0.2s linear;
-o-transition:color 0.2s linear, background 0.2s linear;
transition:color 0.2s linear, background 0.2s linear;
}
nav ul.level_2 {
top: 10px;
}
nav ul.level_3 {
top: 0;
left: 100%; /* von oben */
}
nav ul.level_2 li {
clear: both;
width: 100%;
}
nav ul.level_2 a {
background: green;
display: inline-block;
float: left;
clear: both;
width: 100%;
}
