CSS-Menü-Generator

Navigationsmenüs mit Dropdown gestalten: Unterstrich, Pille oder Leiste, Farben und Abstände einstellen – HTML und CSS kopieren.

Der CSS-Menü-Generator gestaltet eine horizontale Navigation mit optionalem Dropdown. Du wählst den Stil (animierter Unterstrich, Pillen oder dunkle Leiste), Ausrichtung, Farben, Schriftgröße und Abstände. Das Untermenü öffnet sich bei Hover und bei Tastaturfokus über :focus-within, ganz ohne JavaScript.

Stil

Ausrichtung

Hintergrund

Textfarbe

Akzentfarbe

Schriftgröße px

Innenabstand seitlich px

Innenabstand oben/unten px

Abstand zwischen Punkten px

Eckenradius px

Dropdown-Untermenü

<nav aria-label="Hauptmenü">
  <ul class="menu">
    <li><a href="#" aria-current="page">Start</a></li>
    <li class="has-submenu">
      <a href="#">Leistungen</a>
      <ul class="submenu">
        <li><a href="#">Webdesign</a></li>
        <li><a href="#">Entwicklung</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

Navigation mit HTML und CSS

Eine Navigation ist semantisch eine Liste von Links in einem <nav>-Element. Flexbox ordnet die Punkte nebeneinander, gap regelt den Abstand. Das Dropdown ist eine verschachtelte Liste mit position: absolute, die bei :hover und :focus-within erscheint.

Stil	Hover-Effekt	Passt zu
Unterstrich	Linie wächst von links	Unternehmensseiten, Blogs
Pille	Getönte Fläche	Apps, Dashboards
Leiste	Hellere Fläche	Kompakte Kopfzeilen

Das Grundgerüst der Seite rund um die Navigation baust du im CSS-Layout-Generator.

Häufige Fragen

Wie öffnet sich das Dropdown per Tastatur?

Über :focus-within: Sobald ein Link im Menüpunkt den Fokus hat, auch der Hauptlink, wird das Untermenü sichtbar. So erreichst du mit der Tab-Taste auch die Unterpunkte.

Wozu dient aria-current="page"?

Es markiert die aktuelle Seite für Screenreader und dient zugleich als Selektor für den aktiven Stil. So brauchst du keine zusätzliche Klasse wie .active.

Wie mache ich das Menü mobil tauglich?

Das Menü bricht dank flex-wrap um. Für ein Hamburger-Menü brauchst du zusätzlich einen Button, der per JavaScript aria-expanded umschaltet und die Liste ein- oder ausblendet. Ein reines CSS-Menü ohne Button ist auf kleinen Bildschirmen schwer bedienbar.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.