Breite des Dropdown- (Sub) Menü der Website anpassen

Lerne, wie du die Breite der Subnavigation deiner Website mit CSS anpassen kannst.

Vor über einer Woche aktualisiert

Hast du das Problem, dass dein Dropdown-Menü in der Breite zu klein ist und dadurch ggf. deine Menüeinträge unsauber getrennt werden wie z.b. hier:

In diesem Artikel findest du eine Lösung, wie du mittels CSS die Breite des Menüs nach Wunsch anpassen kannst.

Wichtiger Hinweis: Zusätzliche CSS Codes sollte man grundsätzlich vermeiden, da es zu Problemen führen kann. Daher sollte man das Design des Menüs so lassen, wie es ist oder aber den Namen des Menüeintrages ändern, dass er besser in das Standrad Design passt.

1) Videoanleitung

1.1) Codes aus der Videoanleitung

Dies ist der Basiscode, welchen du gemäss Anleitung benötigst:

/*Dropdown Menü Breite - START*/

.nav li ul {
width: 340px; /**Standardwert 240px**/
}

.nav li li ul {
left: 340px; /**Gleicher Wert wie oben nutzen***/
}

#top-menu li li a {
width: 320px; /**20px weniger als der obere Wert**/
}

/*Dropdown Menü Breite - ENDE*/

Dieser Code ist optional, je nachdem ob das Menü in seiner Positionierung verschoben werden muss:

/*Dropdown Menü Positionierung - START*/

.nav li ul {
right: -50px; /**Differenz von 240px zu deiner neuen Breite**/
}

/*Dropdown Menü Positionierung - ENDE*/

Hat dies Ihre Frage beantwortet?