Wie wird das Untermenü einer Headernav gestylt?

Hallo,
ich habe vor einiger Zeit eine Website mit einer barrierefreien, Usability-freundlichen, horizontalen Headernav komplett gestylt mit CSS (desktop-first).

Die <a> haben bei der Nav viele Styles, die <li> und <ul> ein paar wenige, <nav> wieder mehr. War durchaus aufwendig, zumal ich an Vieles gedacht habe.

Jetzt habe ich eine ähnliche Headernav auf einer anderen Site zu stylen, die aber zusätzlich ein Untermenü hat (mit Toggle-Dropdown-Klick-Button, per JavaScript und aria-expanded).

Ich frage mich, wie das Styling dieses Untermenüs zu bewerkstelligen ist, so dass dieser Untermenü-Punkt optisch im Grunde genauso aussieht wie die anderen Hauptmenü-<li>.

Welche Stylings aus der vorherigen Nav kann ich analog übernehmen, quasi nachmachen? Welche Stylings bekommt der linklose <button>, welche sein ul oder parent-item-li?
Kann man da eine allgemeine Grundstrategie empfehlen?

Das HTML der neuen Nav mit Untermenü sieht so aus:

<nav class="headnav" aria-label="hauptmenue">

  <ul class="headnav-haupt-ul">

    /* Die ersten drei li des Hauptmenüs */
    <li><a aria-current="page" href="https://www.dwnh.de/"
    >Startseite</a></li><li><a href="https://
    www.dwnh.de/seite2">anchor2</a></li><li><a
    href="https://www.dwnh.de/seite3">anchor3</
    a></li>

    /* parent-li für Untermenü, button und ul des Untermenüs */
    <li>
       <button class="untermenue-button" aria-expanded="false" 
         type="button">Christliche Spiritualität<span
                class="untermenue-button-pfeil" aria-
                hidden="true">▼</span>
       </button>

       <ul><li><a href="https://www.dwnh.de/seite4">anchor4</a></
          li><li><a href="https:/www.dwnh.de/seite5">anchor5</a></
          li><li><a href="https://www.dwnh.de/seite6">anchor6</a></ 
          li><li><a href="https://www.dwnh.de/seite7">anchor7</a></
          li><li><a href="https://www.dwnh.de/seite8">anchor8</a></
          li>
       </ul>

    </li>

    /* die restlichen li des Hauptmenüs */
    <li><a href="https://www.dwnh.de/seite9">anchor9</a></
    li><li><ahref="https://www.dwnh.de/seite10">anchor10</a></
    li><li><a href="https://www.dwnh.de/seite11">anchor11</a></li>

  </ul>

</nav>

Verstehe. Zumal es beim button/ul/li auch gar kein a gibt (absichtlich) und <button> offenbar nichts erbt und lauter Styles vom Browserstylesheet annimmt. Also kriegt <button> nochmal die volle Breitseite von a-Styles.

Kann man also tatsächlich so einfach sagen, dass
- die Styles für nav, ul, li und a von der vorherigen Headernav ohne Untermenü im Grunde alle anlog anwendbar sind (ins neue Stylesheet reinkopieren)
- zusätzlich aber die Styles für a nochmal auf button angewendet werden (und neue zusätzliche Button-Klassen, die es vorher nicht gab, als Selektoren nutzen)?

Die Styles aus der vorherigen Headernav ohne Untermenü lauten wie folgt. Kannst du mal einen Blick drauf werden, ob da noch etwas dabei ist, was dem oben Gesagten entgegen läuft? Sind eigentlich alles Standardsachen, nur manchmal ohne Kurzform etwas codelastiger (für mich verständlicher) notiert:

nav.headnav {
    grid-area: headnav; 
    width: fit-content; 
    background-color:#fffbf1;
    border: 1px solid black;
    border-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: Inter-Tight, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.015rem;
    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: black;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

Du sprichst von den wenigen unvermeidlichen Unterschieden und neuen Styles, die das ausklappende Untermenü mit sich bringt?

Ein paar Dinge gibt es natürlich schon, ich hatte ja vorher desktop kein ausklappendes Untermenü. Für dieses neue feature kann nicht zufällig alles bereits passen und ausreichen, was an Styles schon da ist für das Hauptmenü.

Ich habe mal gesucht, was diese Änderungen und Neuerungen sein dürften:
- Untermenü-li müssen per display:block untereinander sein (hast du angesprochen oben).

- Das ausklappende Untermenü braucht eine Positionierung; bei den responsiven Hauptmenüs der ersten Website habe ich das mit top 100% left 0 gemacht.

- Das Ausklappen erfolgt als überdeckender overlay; auch das kann ich von den responsiven Hauptmenüs der ersten Website abschauen.

- Die anchors sollen nicht zentriert, sondern linksbündig sein.

- Die Abstände der anchors nach oben/unten wird wohl durch ein anderes padding anzupassen sein.

- Das Ausklappen braucht ein JavaScript; auch da kann ich mich an den resp. Hauptmenüs und deren Ausklappen bei der ersten Website orientieren.

- Das Untermenü-ul muss default ausgeblendet sein.

- Die Breite des ausklappenden Untermenüs mit seinen li soll einheitlich breit sein, sich am längsten anchor orientierend, wird also breiter als die Buttonbeschriftung/parent-item-li oben sein.

- Das Untermenü mit seinen li soll genau wie das Hauptmenü mit einem schwarzen, dünnen Rad umgeben sein und schwarze dünne Trennstriche zwischen den li. Das ist ein wenig Gefrickel mit doppelten Rändern ect. aber auch da kann ich mich am resp. Hauptmenü der ersten Site orientieren.

Zu den beiden responsiven Hauptmenüs der ersten Site unten ein screenshot. Weniger optisch als mehr technisch kann ich da einiges für das desktop-Untermenü übernehmen.

Das müssten alle Unterschiede/Neuerungen sein oder fällt dir noch etwas ein oder zu deren Umsetzung mit CSS?

Ich versuche es mal zusammenzufassen:

1. Ich habe den bestehenden CSS-Code fürs Hauptmenü ohne Untermenü aus der ersten Website als Basis.

2. Der Button bekommt nochmal alle Stylings, die im Hauptmenü seine <a>-Kollegen haben, weil er selbst kein <a> hat und <button> nichts erbt, aber die Browserstylesheet-Styles übernimmt.


3. Gleiches:
Vieles bleibt gleich.
Das Untermenü und der Klickbutton sollen optisch so aussehen wie die übrige Nav und bezüglich Linkfläche auch dieselbe Funktion haben:
- Schrift,
- Hintergrundfarbe,
- padding zum Text,
- entfernte Listenpunkte,
- vergrößerte Linkflächen,
- schwarze Ränder/Trennstriche,
- abgerundete Ecken des ul-Rahmens.
Außerdem entfernte Linkunterstreichung, aber das ist bereits bei den allg. Basisstyles erledigt.

4. Unterschiede:
Dann gibt es einige spezielle neue Sachen bzw. Änderungen für das ausklappende Menü, s. Aufzählung, die eingebaut werden müssen, weil die Headernav der ersten Website ja gar kein Untermenü hatte. Zum Teil kann ich diese Dinge analog wie bei meinen resp. Hauptmenüs der ersten Website machen.

Sehe ich das soweit alles richtig?

Dann werde ich es mal übers Wochenende probieren und alles zusammenfügen für die neue Headernav mit Untermenü in der desktop-first-Ansicht.