Menü-Buttons und Dropdown-Menü überlappen sich

[Rolf B]

Hallo Metallmonster,

du legst den ganzen Module-Content auf einen Z-Index von 900 oder 901. Was innerhalb des Moduls passiert, wird davon nicht beeinflusst.

Es gibt mehrere CSS Eigenschaften, die Stapelkontexte erzeugen können. Die z-index Eigenschaft beeinflusst Stapelkontexte, nicht HTML Elemente. Folge mal beiden Links und lies Dir das durch.

Ohne Stapelkontext werden die Elemente einfach übereinander gelegt. Wer zuletzt kommt, liegt obendrauf. Die Submenüs von früher definierten <li> liegen deshalb in der Stapelreihenfolge unterhalb von später definerten <li>. Da dein Menü zweizeilig ist, schieben sie sich unter die <li> der zweiten Zeile.

Die Lösung ist ein z-index:1 für die Popup-Menüs (class="jsn-submenu-level-1"). Damit bekommen sie einen neuen Stapelkontext und können über den <li> des Elternkontextes liegen.

Rolf