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%; }

Zitieren