[gelöst] CSS: Lavalamp-Effekt im Menü - Schriftart der aktiven Klasse verändert sich

Hallo zusammen,

ich möchte eine Art "Lavalamp"-Effekt aus purem CSS in meinem Hauptmenü einbauen.

Leider wird jedoch immer die Schriftart- und Größe der aktiven Klasse verändert, sobald diese geöffnet wird (vmtl. trail). Die hover-Effekte hingegen funktionieren problemlos.

Leider habe ich keine Idee, welchen Selektor ich denn ändern muss, damit sich die Schriftart nach dem Klicken nicht mehr verändert.

https://test.passion.earth/startseite.html

Hat jemand eine Option in petto?

Besten Dank für eure Unterstützung! :)

ergänze z.B, dein css um folgende Klassen

HTML-Code:

---

ul li a:hover, ul li a:focus, ul li strong.active

---

HTML-Code:

---

ul li a, ul li strong.active

---

Falls es nicht fett aussehen soll müsstest Du dem strong evt. noch ein font-weight: normal mitgeben.

Zitat:

---

Zitat von Bennie

ergänze z.B, dein css um folgende Klassen

HTML-Code:

---

ul li a:hover, ul li a:focus, ul li strong.active

---

HTML-Code:

---

ul li a, ul li strong.active

---

Falls es nicht fett aussehen soll müsstest Du dem strong evt. noch ein font-weight: normal mitgeben.

---

Besten Dank Dir! Es hat funktioniert. :)

Hast Du vielleicht noch eine Idee, weshalb denn die Lavalamp beim Hovern nicht funktioniert, wenn der rechte Menüpunkt ("Mitmachen") geöffnet ist? Bei allen anderen funktioniert es...

Das hat prinzipiell dieselbe Ursache , auch hier wird ja von a zu strong gewechselt wenn der Punkt aktiv ist und Du hat doch an den letzten Punkt das Pseudo Element gebunden.

HTML-Code:

---

ul li:last-child a::after

---