Wie kann ein responsiv ausklappendes DD-Menü, das in einer Gridzelle ist, den Content der Gridzellen darunter überlappen?

[Matinee]

Hallo Rolf,

danke für die schnelle Antwort.

deine Screenshots sind von deiner Website? Oder zeigst Du andere Webseiten, bei denen es so funktioniert wie Du Dir das denkst? Zumindest tremontrentals verschiebt ebenfalls, und zwar nach links. Der andere Screenshot sieht so aus wie es dein Wunsch ist, scheint mir.

Es sind zwei andere Websites, die zeigen, wie ich das overlay meiner beiden DD-Menüs im Smartphone-MQ (und bei meiner zweiten Website dann analog als DD-UNTERmenü in der desktop-Ansicht der Headernav) gern hätte.

Ich habe jetzt nochmal ein screenshot von meiner Baustellen-Site hier ergänzt, das zeigt, wie mit dem offenbar "üblichen" code (absolue, relative, z-index) es jetzt aussieht:

Grundsätzlich sollte dein CSS funktionieren. Tut es das nicht, ist die Ursache in anderen Wechselwirkungen zu finden.

Mein Ansatz bei so etwas ist: Prüfe mit den Entwicklertools, ob deine CSS Regeln überhaupt greifen oder von anderen Regeln überschrieben werden.

Rolf

Das mit position absolute plus z-index beim ul und position relative beim nav müsste klappen? Das wäre ja super, aber ich habe gelesen, dass ein Grid ein Überlappen auf diese Weise nicht zulässt. Der neue screenshot zeigt ja nur die schwarzen Buchstaben der Linktexte, die auch den main-Text nicht überlappen.

Was genau sollte ich im FF Inspector prüfen?

Ein echter Link auf deine Baustellenseite wäre sicher hilfreicher als Screenshots.

Die Site ist so bei mir im Visual Studio Code-Editor. Ich habe das noch nie gemacht, aber wenn es hilft, könnte ich ggf. die Codes auf so einem fiddle-Dings reinstellen. Wobei das gesamte Stylesheet schon seeehr lang ist...