Benötige Hilfe bei CSS für das Contao Navigationsmodul

[Norbert001]

Hallo zusammen,

bin gerade dabei ein Menu zu gestallten.
Onepage und Dropdown zusammen in einem Menu.
Die Onepagenavigation sowie das Dropdownmenu funktionieren auch soweit aber ich habe im Moment zwei Probleme.

Hier erstmal der Link: https://vorschau.berkshiresbest.de/
Problem 1

Beim Hover wird die weiße Schrift nicht übernommen.

nav ul li:hover {
color:#ffffff !important;
background: #000000 !important;
}

Problem 2

Bei active wird weder die Schrift noch der Hintergrund übernommen.

nav ul li.active {
color:#ffffff !important;
background: #000000 !important;
}
Habt Ihr eine Lösung für mich?

[Spooky]

Moderation: bitte einen passenden Thread Titel wählen. Mit "Menu" weiß man nicht, was einem im Thread erwartet. Bspw. sollte der Titel in diesem Fall eher "Benötige Hilfe bei CSS für das Contao Navigationsmodul" lauten.

[Spooky]

Moderation: Thread in das korrekt(ere) Forum verschoben.

[dazzle89]

Du solltest die Links und nicht die Listenpunkt ansprechen. Also nicht li, sondern li a. Je nach Contao-Version solltest du zusätzlich noch span bzw. strong ansprechen, da sie anstelle von Links beim aktiven Menüpunkt benutzt werden.

Zu Problem 2: Auf welchen Menüpunkt muss ich denn klicken, damit einer active ist? Bei mir führen alle Links ins Nichts.

[mlweb]

Grundsätzlich solltest Du vermeiden mit !important zu arbeiten, das ist ganz schlechter Stil und man handelt sich meist auch Probleme damit ein. In den allermeisten Fällen geht das auch ohne. Ich nutze das höchstens mal zum Testen.
Mit der Verwendung von !important erhöht man die Spezifität unnötig. Muss/möchte man die Eigenschaft an anderer Stelle noch einmal ändern, dann geht das auch nur im Zusammenhang mit !important (und/oder Inlinstyles).

Jetzt zu Deinen Problemen.
Wie man in den Entwicklertools sehen kann, kommt die blauegraue Farbe vom a-Tag. Du musst also den Hover-Zustand des a-Tags innerhalb Deiner Navigation anpassen. Das dann mit so wenig Spezifität wie nötig und mit so viel wie Du brauchst, damit das tatsächlich greift und nur dort greift, wo Du es benötigst.

nav a:hover {
color: white;
}

denke reicht da nach dem jetzigen Entwurf.

Bei aktivem Zustand ist das Problem, dass Du im Code keine Klasse .active hast und damit mit dieser Klasse auch nicht stylen kannst. Muss also ein angepasstes Template sein, denn Contao setzt die Klasse .active bei Verwendung des Standard-Templates.

Du solltest Dich mal intensiv mit den CSS und den Entwicklertools des Browsers Deiner Wahl beschäftigen.

Nachtrag: Die Theme-Demo setzt allerdings die Klasse .active.