mein erstes Hamburger Menü

[der henry]

Hallo,

ich habe mir mein erstes Hamburger Menü aus diversen Beispielen zusammen gestellt, das ich mit php in die Ausgabe der Seite integriere.#

Leider bin ich auf ein Problem gestoßen, das ich nicht selbst lösen kann.

Nachfolgend mein Problem mit dem Menü. Die Überschriften sollten in einer Linie laufen, nach unten ist es dann egal. Aktuell wird es genau umgekehrt gemacht ... ?????

**Überschrift 1**
    Menü 1
    Menü 2
    Menü 3                       **Überschrift 3**
    Menü 4                            Menü 1
    Menü 5    **Überschrift 2**       Menü 2
    Menü 6        Menü 1              Menü 3
    Menü 7        Menü 2              Menü 4 

Das ist die "Menüdatei" (nur ein Teil)

<nav role="navigation">
    <details>
    <summary><span>Menü</span></summary>
    <ul id="menu">  
      <li><a class="menuueberschrift" aria-current="page">Übersicht</a></li>
      <li><a class="menu" href="#">Das ist ein sehr langer Text</a></li>      
      <li><a class="menu" href="bild_t1.php">T1</a></li>
      <li><a class="menu" href="bild_t2.php">T2</a></li>
      <li><a class="menu" href="#">Kontakt</a></li>
      <li><a class="menu" href="#">Seite 3</a></li>      
      <li><a class="menu" href="#">Seite 4</a></li>
    </ul>
    <ul id="menu1">
      <li><a class="menuueberschrift" aria-current="page">Trends</a></li>
      <li><a class="menu" href="#">Das ist ein sehr langer Text</a></li>
      <li><a class="menu" href="#">Seite 3</a></li>      
      <li><a class="menu" href="#">Seite 4</a></li>
     </ul>
  .....
......    
    <ul id="menux">
      <li><a class="menuueberschrift" aria-current="page">System</a></li>
      <li><a class="menu" href="datapointsPage.php">Edit Datapoints</a></li>
      <li><a class="menu" href="#">Seite 3</a></li>      
      <li><a class="menu" href="#">Seite 4</a></li>
      <li><a class="menu" href="systeminfo.php">Systeminfo</a></li>
    </ul>
    </details>
  </nav>

Und dazu die passende css Datei

nav summary {
  list-style-type: "☰";
  font-size: 1.5rem;
  position: fixed;
  top: 45px;
  left: 10px;
  z-index: 100;
  cursor:pointer;
}

nav summary:hover {
  font-size:2.0em;
  text-shadow: 2px 2px 5px white;
}

nav summary span {
  font-size: 0px;
}

nav details[open] summary {
  list-style-type: "✖";
  color: red;
}

nav details {
  position: absolute;
  top: 45px;
  left: 10px;
  background-color: DarkGrey;
  z-index: 100;
  border: double indigo;
}

nav ul {
  margin-top: 1.3em;
  margin-right: 2.2em;
  display: inline-block;
}

a { 
	color: indigo);
	font-size: 1.2em;
}

li { margin-bottom: 3px; }

.menuueberschrift
{ color: black; 
  font-weight: bold; 
  text-decoration: underline;
  font-size: 1.3em;
}

.menu:hover { color: yellow; }
.menu:focus { color: yellow; }

Eventuell sieht einer sofort was das Problem ist 🤔

Vielen Dank !!

PS: Bin auch für Tipps zur Verbesserung/Optimierung dankbar.