Dropdown-Navigation

[NicoHu]

Hallo Leute

Ich habe folgendes Problem und konnte auf den ca 5000 Seiten Forumsbeiträgen leider nix finden ... (ich habe ALLE durchgelesen ... NICHT)

Ich habe mir mit reinem CSS eine Dropdown Navigation erstellt. Nun habe ich unter "home" mal einen kleinen Artikel verfasst und kurzes uraltes Video hingepackt. Leider passiert nun genau das was ich erwartet habe, nämlich dass da die Dropdown-Punkte relativ weit nach unten reichen. Wenn ich jetzt mit dem Cursor die unteren Menüpunkte anwählen will verschwindet der Dropdown sobald ich auf der Höhe des Video-Players bin.

Ich bin nicht so n WebdesignGuru und komm einfach nicht weiter. Für das bessere Verständnis hier kurz der vorübergehende Link:

web1109.login-6.loginserver.ch

unter Produkte findet ihr den "langen" Dropdown.

Merci

[speedweb]

Hallo,
dazu den z-index (CSS) für den Navigationscontainer anpassen.

getestet und funktioniert:
.mod_navigation ul {
position: absolute;
margin: 0 auto;
font-weight: bold;
color: #fff;
list-style: none;
z-index: 1000;
}

[NicoHu]

Jipppi vielen dank, das war ja nur was kleines... hab zwar von z-index schon gehört weiss aber absolut nicht was das genau macht... muss mich da mal schlau machen...
Da ich neu in dem Forum bin weiss ich jetzt nicht ob ich das Thema selber irgendwie schliessen muss wenn es beendet ist oder einfach sein lassen...

[Andreas]

Einfach sein lassen.

Normalerweise erscheinen Block-Elemente (z.B. DIV) untereinander. Mit Positionierungen wie fixed, absolute, relative und sticky (not supported) kann man Elemente über andere legen. Dabei kann es schonmal passieren, dass ein Element unter einem anderen liegt. Mit z-index kann man die Ebene einstellen. Stelle es dir vor wie transparente Folien, welche übereinander gelegt werden. Der höchste z-index liegt ganz oben.

Auch die Reihenfolge kommt zum Tragen.

<div class="d-1" style="position:absolute;"></div>
<div class="d-2" style="position:relative;"></div>

Wenn d-1 und d-2 hier übereinander liegen, ist d-2 über d-1, weil d-2 nach d-1 kommt. Folgendes CSS würde hier Abhilfe schaffen.

.d-1 {
  z-index: 1;
} 

Hätte d-2 keine Positions-Angabe (Default => position:static;), wäre d-1 automatisch über d-2.