Zitat filscoon: "Ich habe für das komplette menü ein hintergrundbild möchte nun das wenn man über eines der Menüpunkte hovert ein anderes kleineres Bild hinter dem großen hintergrundbild durch css3 transision sich bis nach unter dem jeweiligen menüpunkt bewegt.".
Dein Problem hängt nicht wirklich mit irgendwelchen li-Elementen und deren Klassen zusammen (zumindest dann wenn ich dein Anliegen richtig verstehe).
Was ich verstehe:
Du hast ein Hintergrundbild für die GESAMTE Hauptnavigation definiert. Jetzt wilst du, dass wenn du über eines der Kinderelemente (li's) fährst (:hover) sich das Hintergrundbild des Elternelements (bzw. der gesamten Navigation) ändert.
Wenn das stimmt: das ist prinzipiell mittels CSS(3) nicht möglich, da es keinen Elternselektor gibt (du hoverst (sorry für das Wort ;) ) ja nicht die gesamte Navigation sondern ja nur ein Kinderelement (li) von selbiger).
Eine Lösung wäre es via javascript zu realisieren.
Eventuell könnte man das ganze auch via einer Umstrukturierung der gesamten Navigation mittels absoluter/relativer Positionierung UND z-index umsetzen -> das wäre aber nicht sehr "sauber" und zudem sehr aufwendig.
LG, pixselig
PS: wenn du die CSS3-Eigenschaft "transition" für ein backgroundimage verwenden willst musst du das background-image auch via css einbauen und nicht via dem html-tag "<img> ;)