Divi 5 Mega-Menü ohne Plugin bauen: vollbreites Dropdown per CSS

Zusammenfassung: Ein Mega-Menü — also ein vollbreites, mehrspaltiges Dropdown — braucht in Divi 5 kein Plugin. Es reicht eine CSS-Klasse am Menüpunkt plus ein getestetes Stylesheet-Snippet: Der Trick ist position: static am Menüpunkt, damit sich das Dropdown am Menü-Modul statt am einzelnen Link ausrichtet. Wir haben es auf einer Divi-5.8-Installation gebaut und vermessen — das Dropdown spannt sich damit über die volle Modulbreite und ordnet Unterpunkte als Spalten an.

Was wir bauen

Divis Standard-Dropdown hängt schmal unter dem einzelnen Menüpunkt:

Daraus machen wir ein vollbreites Panel, in dem die Unterpunkte als Spalten nebeneinander stehen:

Schritt 1: Dem Menüpunkt die Klasse „mega-menu” geben

WordPress kann einzelnen Menüpunkten CSS-Klassen mitgeben — die Funktion ist nur versteckt:

1. Design → Menüs öffnen und oben rechts „Ansicht anpassen” aufklappen (klassisch: „Optionen einblenden”).
2. Haken bei CSS-Klassen setzen.
3. Den gewünschten Menüpunkt aufklappen — es gibt jetzt das Feld CSS-Klassen (optional). Dort mega-menu eintragen.
4. Menü speichern.

Die Klasse landet am <li>-Element des Menüpunkts — genau da, wo unser CSS ansetzt.

Schritt 2: Das CSS

In Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS:

/* 1) Menüpunkt aus dem Positions-Kontext loesen:
      Das Dropdown richtet sich dann am Menü-Modul aus, nicht am Link */
.et-menu li.mega-menu {
  position: static !important;
}
.et_pb_menu {
  position: relative;
}

/* 2) Dropdown vollbreit als Spalten-Panel */
.et-menu li.mega-menu > ul.sub-menu {
  width: 100% !important;
  left: 0 !important;
  top: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 24px !important;
  padding: 28px !important;
  box-sizing: border-box;
  background: #ffffff !important;
  border-top: 2px solid #B1883E !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

/* 3) Unterpunkte als Spalten */
.et-menu li.mega-menu > ul.sub-menu > li {
  flex: 1 1 200px;
  margin: 0 !important;
}
.et-menu li.mega-menu > ul.sub-menu > li > a {
  width: 100% !important;
  font-weight: 600;
}

Warum das funktioniert: Divi positioniert Dropdowns absolut zum jeweiligen Menüpunkt (li hat position: relative). Setzen wir den Menüpunkt auf position: static, sucht sich das absolut positionierte Dropdown den nächsten Positions-Anker — das Menü-Modul. width: 100% + left: 0 spannen es dann über die volle Modulbreite. Wir haben es nachgemessen: Das Panel rendert exakt in Zeilenbreite (in unserem Test 1024 px), die Unterpunkte verteilen sich per Flexbox als Spalten.

Farben und Akzentlinie (#B1883E im Beispiel) passt du an deine Marke an.

Schritt 3: Spalten mit Überschriften strukturieren

Ein echtes Mega-Menü gruppiert Links unter Zwischenüberschriften. Das geht komplett im WordPress-Menü:

1. Lege pro Spalte einen Individuellen Link mit URL # als direkten Unterpunkt des Mega-Menü-Eintrags an — das werden die Spaltentitel.
2. Hänge die eigentlichen Links jeweils eine Ebene darunter (dritte Ebene).
3. Style die Ebenen:

/* Spaltentitel (2. Ebene) */
.et-menu li.mega-menu > ul.sub-menu > li > a {
  text-transform: uppercase;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  pointer-events: none; /* Titel ist nicht klickbar */
}
/* Links darunter (3. Ebene) wieder normal */
.et-menu li.mega-menu ul.sub-menu ul.sub-menu {
  position: static !important;
  display: block !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

Damit rendert jede Spalte als „Titel + Linkliste” — das Muster, das man von großen Shop- und Agentur-Websites kennt.

Wichtig: Mobile ausnehmen

Im Mobile-Menü (unter 980 px klappt Divi aufs Hamburger-Menü um) ergibt ein vollbreites Hover-Panel keinen Sinn — dort greift ohnehin Divis Mobile-Darstellung, die unsere Desktop-Regeln nicht berührt, weil das Mobile-Menü in einem eigenen Container (.et_mobile_menu) rendert. Prüfe nach dem Einbau trotzdem kurz die Handy-Ansicht; wie du die mobilen Untermenüs klappbar machst, zeigt unser Mobile-Menü-Tutorial.

Tastatur & Barrierefreiheit nicht vergessen

Ein Mega-Menü, das sich nur per Maus-Hover öffnet, sperrt Tastatur-Nutzer aus — und ist damit ein Barriere­freiheits-Problem (relevant seit dem BFSG). Divis Dropdowns öffnen per :hover; für die Tastatur brauchst du zusätzlich :focus-within, damit sich das Panel auch beim Durchtabben öffnet:

/* Mega-Menü auch per Tastatur (Tab) öffnen */
.et-menu li.mega-menu:focus-within > ul.sub-menu {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

Damit klappt das Panel auf, sobald ein Link darin den Fokus bekommt. Prüfe danach real: einmal mit Tab durch die Navigation gehen (ohne Maus) — das Mega-Menü muss sich öffnen und jeder Link erreichbar sein. Achte außerdem auf ausreichenden Kontrast der Spaltentitel; die dezente Graustufe aus dem Beispiel oben ist hübsch, aber prüfe sie gegen die WCAG-Grenze von 4,5:1. Barrierefreiheit ist beim Menü kein Nice-to-have — es ist die meistgenutzte Komponente der ganzen Seite.

Wann doch ein Plugin?

Ehrliche Grenze der CSS-Lösung: Sie kann Links in Spalten — keine Bilder, Buttons oder Formulare im Dropdown. Wer ein Mega-Menü mit Inhalten wie Produktbildern oder CTAs braucht, hat zwei Optionen: ein Mega-Menü-Plugin aus dem Divi-Ökosystem — oder den Weg über Divis Theme Builder, bei dem das „Menü” aus normalen Divi-Modulen gebaut wird. Beides ist deutlich mehr Aufwand; für 80 % der Fälle reicht die CSS-Lösung.

Häufige Fehler

Das Dropdown ist vollbreit, aber die Links kaum sichtbar

Divi blendet Dropdown-Links mit einer Opacity-Animation ein. Wenn eigene Regeln die Animation stören, bleiben die Links halbtransparent hängen. Lösung: den Fade für das Mega-Menü deaktivieren:

.et-menu li.mega-menu li,
.et-menu li.mega-menu a {
  opacity: 1 !important;
  animation: none !important;
}

Genau dieses Verhalten ist uns beim Testen selbst begegnet — mit dem Zusatz war es behoben.

Das Panel richtet sich am falschen Element aus

Dann fehlt eine der beiden Positions-Regeln: position: static am li.mega-menu und position: relative am .et_pb_menu. Beide zusammen bestimmen, woran sich das Dropdown ausrichtet.

Die Klasse hat keinen Effekt

Prüfe im Browser-Inspektor, ob das <li> wirklich class="… mega-menu …" trägt. Häufigste Ursache: Das CSS-Klassen-Feld war beim Eintragen gar nicht aktiviert (Schritt 1) und die Klasse wurde nie gespeichert.

Alle unsere Divi-5-Anleitungen und Problemlösungen an einem Ort: zum Divi-5-Tutorial-Hub.

Häufige Fragen

Brauche ich für ein Divi-Mega-Menü ein Plugin?

Für Spalten-Dropdowns mit Links: nein — die CSS-Klasse plus das Snippet aus diesem Artikel reichen, getestet auf Divi 5.8. Ein Plugin (oder ein Theme-Builder-Eigenbau) lohnt erst, wenn Bilder, Buttons oder Formulare ins Dropdown sollen.

Funktioniert die Lösung auch in Divi 4?

Ja. Die Menü-Klassen (et-menu, sub-menu) sind in Divi 4 und Divi 5 identisch — wir haben die Klassen-Kontinuität am gerenderten Quelltext geprüft. Das Snippet ist damit versionsübergreifend einsetzbar.

Wie viele Spalten bekommt das Mega-Menü?

So viele, wie Unterpunkte der zweiten Ebene existieren — die Flexbox verteilt sie automatisch (flex: 1 1 200px: mindestens 200 px pro Spalte, bei Platzmangel wird umbrochen). Feste Spaltenzahlen erreichst du mit flex-basis: 25% für exakt vier Spalten.

Was passiert mit dem Mega-Menü auf dem Handy?

Nichts — und das ist gewollt. Unter 980 px rendert Divi das separate Mobile-Menü in einem eigenen Container, den unsere Desktop-Regeln nicht anfassen. Die mobile Optimierung (klappbare Untermenüs) behandelt unser separates Tutorial.

Quellen

• Eigene Tests auf einer Divi-5.8-Installation (Juli 2026) — Snippets, Messwerte und Screenshots stammen aus dieser Umgebung
• Divi Menu Module — Elegant Themes Dokumentation