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

[Matinee]

Hallo,

ich stelle gerade die erste von drei Websites von WP auf "statisches" HTML/CSS um (mit Hilfe von VSC).

Mein Basislayout desktop-first ist ein typisches Artikellayout, ein dreispaltiges Grid mit grid-template-areas.

Im Media Query für Smartphones wird daraus ein zweispaltiges Grid, ebenfalls mit grid-template-areas, wobei die beiden Navs (headnav und sidenav) je eine Spalte in der zweiten Zeile einnehmen. Darunter kommt in der 3. Zeile dann der main-Content (h1, Inhaltsverzeichnis, Text). Siehe HTML-Code und Grid-Code fürs MQ unten.

Mittels JS (das einzige, das ich habe) und der darin angestoßenen Klassen "headnavmenue-zeigen" und "sidenavmenue-zeigen" werden die im Smartphone default ausgeblendeten DD-Menüs per Button-Klick dann eingeblendet. Siehe CSS-Code im MQ unten.

Das funktioniert auch alles. ABER: Mit dem Ausklappen des DD-Menüs wird der main-Content (h1 ect.) darunter (3. Gridzeile) nach unten verschoben. Ich hätte gern für beide Navs ein "overlay" des ausklappenden DD-Menüs über dem main-Content, der an seinem Platz bleibt. Ein Musterbild unten zeigt so einen overlay.

position absolute und hoher z-index für das ul-Menü sowie position relative für parent <nav> funktioniert nicht: main wird zwar nicht mehr verschoben, aber das ul-Layout geht komplett verloren, ich sehe nur noch die nackten Linktexte (wie transparent) und Teile des Rahmens. Es ist auch nicht overlay, man sieht Linktexte und main-Text beide gleichzeitig.

Ein mit Grid-features bewirktes explizites überlappendes Positonieren der beiden Navs mit main dürfte auch nicht helfen, da der overlay ja nur beim Ausklappen erwünscht ist und nur das ul-Menü betreffend, nicht die ganzen Navs.

Wie geht das, möglichst unter beibehaltener Verwendung von grid-template-areas im MQ? Bei der zweiten umzustellenden Site wird mich die Sache auch desktop betreffen, weil dort die horiz. Nav in eigener Gridzelle ein ähnlich ausklappendes DD-UNTERmenü hat.

Ich bin nur Hobby-Coder und habe recherchiert, aber keine Lösung gefunden. Vielleicht kann mir hier jemand helfen.

HTML der headnav (sidenav im Grunde identisch):

<nav class="headnav" aria-label="label1">
<button class="headnav-button" aria-expanded="false" type="button">Menü 1<span class="button-pfeil">▼</span></button>
<ul class="headnav-haupt-ul">
<li><a href="url1">Linktext1</a></li>
<li><a href="url2">Linktext2</a></li>
<li><a href="url3">Linktext3</a></li>
<li><a href="url4">Linktext2</a></li>
<li><a href="url5">Linktext5</a></li>
<li><a href="url6">Linktext6</a></li>
</ul>
</nav>

Grid-Code MQ und Einblenden des Menüs nach User-Klick per JS:

@media screen and (max-width: 600px) {
  div.grid-container { 
      display: grid;
      max-width: 600px; /
      grid-template-columns: 1fr 1fr; 
      grid-template-rows: auto auto; 
      grid-template-areas: 
      "header header"
      "headnav sidenav"
      "main main"
      "aside aside"
      "footer footer"; 
  }

  nav.headnav {
    grid-area: headnav;
    width: fit-content; 
    overflow: visible; 
    position: relative; /* resp Code zwecks overlay !!! */
  }


  /* responsiver Code: Mit dieser Klasse blendet JS das default ausgeblendete HeadnavMenü im Smartphone nach User-Klick ein; */
  ul.headnav-haupt-ul.headnavmenue-zeigen {
      display: block;
      position: absolute; /* resp Code zwecks overlay !!! */
      z-index: 9999; /* resp Code zwecks overlay !!! */
  } 
}