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

[Matinee]

Hallo Rolf,

Gab es denn darüber eine Hintergrundfarbe für dieses ul?

Nein, das war beim nav.

Die Stylings für die beiden Navs waren ziemlich aufwendig für mich, weil auf jeder Ebene, nav, ul, li, a irgendwas Bestimmtes zu machen war und insgesamt auch relativ viel. Die meisten Stylings desktop-first sind beim nav und bei den a.

list-style-type: none scheint tatsächlich vom normalen ul-Styling weiter zu gelten, background-color nicht, weil nicht vererbt. Offenbar hatte ich zwar Recht mit dem Weitergelten der normalen ul-Styles, aber keine zutreffende Einschätzung darüber, welche Stylings tatsächlich beim ul wirksam waren und was nur so aussah.

Hier sind vollständig alle Stylings für die headernav, desktop-first (Basislayout):

nav.headnav {
    grid-area: headnav; 
    width: fit-content; 
    background-color:#fffbf1; 
    border: 1px solid #000000; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
    box-shadow: #6A3333 3px 3px 3px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    overflow: visible; 
}


ul.headnav-haupt-ul {
    list-style-type: none; 
    display: inline-block; 
    width: 100%; 
}

.headnav-haupt-ul li { display: inline-block; }

.headnav-haupt-ul li > a {
    display: block; 
    width: auto; 
    font-family: Arial, sans-serif;
    font-size: 0.875rem; 
    text-decoration: none; 
    padding-left: 13px; 
    padding-right: 13px; 
    padding-top: 14px; 
    padding-bottom: 14px; 
    outline: none; 
    white-space: normal; 
    border-style: solid; 
    border-color: #000000; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
}

/* Der zwecks Resp. nachträglich im HTML ergänzte Menü-Button wird desktop-first ausgeblendet und erhält diverse Stylings; */
button.headnav-button {
    display: none; 
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    padding-left: 15px;
    font-family: Arial;
    font-size: 1rem;
    background-color:#fffbf1; 
}

/* Styling des Pfeiles; U-Bericht  ? */
button.headnav-button > span.button-pfeil {
    margin-left: 15px; /* seitlicher Abstand des Buttonpfeiles zur Buttonbeschriftung;  ? */
}

Mit meiner Vermutung im letzten post, dass das overlay analog dann auch so für ein DD-UNTERmenü aus einer horiz. Nav desktop in eigener Gridzelle klappen sollte, liege ich richtig? Ist ja im Grunde "dasselbe" Szenario, nur desktop und halt ein UNTERmenü, dass DD ausklappt, in eine andere Gridzelle hinein/darüber.