Aller guten (CSS-)Dinge sind drei...

Hallo zusammen,

ich will die hiesige Hilfbereitschaft nicht überstrapazieren, aber meine eigenen Bemühungen führen mich nur fast zum Ziel (seufz)... Also auf ein Letztes (für heute): Auf meiner Testinstallation

https://www.klein-aber-fein.de

habe ich den Titel-Text durch ein Foto ersetzt und dieses mit etwas CSS schattiert. Soweit, so schön. Durch den Schatteneffekt wirkt es jetzt aber doof, wenn man einen Punkt des waagrechten Hauptmenüs anwählt, dann schlägt dessen weiße Hintergrundfarbe durch (was ohne den Schatten nicht zu sehen wäre).

Mit

.main-navigation .main-nav ul li a:hover {
       background: transparent
}

ist es mir immerhin schon mal gelungen, den unschönen Effekt beim Drüberhovern zu unterbinden, und mit

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
       background: transparent
}

auch beim aktuell ausgewählten Menüpunkt. Das schaut dann auch schon fast so aus, wie ich es will. Was immer noch stört, ist das "Durchschlagen" des weißen Hintergrunds bei MouseOver über den aktuell ausgewählten (und daher hellgrau abgesetzten) Menüpunkt. Kriegt man das auch noch weg und wie fasse ich dann die drei Fälle in einem CSS-Statement syntaktisch korrekt zusammen, statt uneleganterweise deren drei zu verwenden?

Dank und Gruß,
Ralph

Ha, ich habe eine elegantere Lösung gefunden und den Trick mit dem Abstand aus meinem vorherigen Problem angewendet: Mit dem margin-Argument in

.site-header .header-image {
    margin: 0 auto 1.5em auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
}

setze ich das Hauptmenü ein Stück weit tiefer, so daß dessen weiße Hintergrundfarbe jetzt nicht mehr in den Schatten des Headerbildes hineinreicht, egal ob beim Hovern, Auswählen or whatever. Kostet nur wenig screen estate, schaut großzügiger aus und ist obendrein simpler...

Beste Grüße,
Ralph