[gelöst] CSS für Menü Sidebar

Hallo in die Runde

mit diesem CSS-Regeln habe ich bisher das Menü beeinflusst:
/* MenüLinks aktive und hover-Farbe*/
.module_menu ul li a:hover,
.module_menu ul li a:active,
.module_menu ul li a:focus {
    font-weight: bold;
    background-color: #ddeeff;
}
.module_menu ul li.current ul li a {
    color: #333333;
}
/* keine Unterstreichnung im Menü */
.nav a:hover,
.nav a:focus {
  text-decoration: none
}

Das hab ich mir nun angepasst auf das neue Allrounder:
/* MenüLinks aktive und hover-Farbe*/
.mod-menu ul li a:hover,
.mod-menu ul li a:active,
.mod-menu ul li a:focus {
  font-weight: bold;
  background-color: #ddeeff;
}
.mod-menu ul li.current ul li a {
  color: #333333;
}
/* keine Unterstreichnung im Menü */
.nav a:hover,
.nav a:focus {
  text-decoration: none !important;
}

Könnte das passen?
Naja, eigentlich passt es nicht - weiß ich ja, denn zum Bsp. die Hintergrundfarbe der Menüpunkte beim Hover bleibt nicht so hell (siehe Screenshot).
 

Der erste Fehler ist denke ich dass du ".mod-menu ul" schreibst. Das würde bedeuten du willst die Regel bei jeder Liste innerhalb des Elements mit der CSS Klasse "mod-menu" anwenden, aber nicht bei dem Element selber. Nun ist "mod-menu" aber bei der ersten UL Ebene als Klasse angeben und ich denke du willst die Regel auf das gesamte Menü und nicht nur auf Untermenüs anwenden. Dann wäre "ul.mod-menu" besser.

Der andere Fehler liegt in der Spezifität. Die bestehenden Regeln sind konkreter weil sie noch zusätzlich das "li.nav-item" haben, und du nur das "li" hast.

Aber mal abgesehen davon, die Farben kannst du ja eh im Template-Stil unter Templatefarben einstellen. Einfach runterscrollen bis zum Teil "Menü". Dazu brauchst du keine spezifischen CSS Regeln.

Ok, ich schau mir das bei nächster Gelegenheit an.
Allerdings habe ich in den Templatefarben für die Menüs beim Hovern nichts gefunden ... bin mir jetzt aber auch nicht sicher.

Thomas Hunziker schrieb:

Einfach runterscrollen bis zum Teil "Menü". Dazu brauchst du keine spezifischen CSS Regeln.
 

Eine Hintergrundfarbe für "hover" kann ich da aber nicht festlegen.

Aber das passt jetzt für mich:

/* MenüLinks aktive und hover-Farbe*/
.mod-menu li.nav-item a:hover,
.mod-menu li.nav-item a:active,
.mod-menu li.nav-item a:focus {
  font-weight: bold;
  background-color: #ddeeff;
}
Das mit dem "mod-menu" und UL hab ich nicht verstanden, geb ich zu. 

Danke.
 

Ah stimmt, die Hintergrundfarbe nicht.
Rest sieht jetzt gut aus.