nicht angemeldet
Warum wiederholst du die ganzen Eigenschaften immer wieder für jedes Menüelement und dann auch noch für jeden Status?
:hover, :active und :focus sind Unterzustände, die du nicht separat formatieren musst. Sie »erben« vom Normalzustand und du brauchst nur abweichende Formatierungen angeben.
:hover gibt es bei vielen Elementen, :active und :focus machen für ein div (oder span) keinen Sinn.
umgesetzt, danke.
Wozu brauchst du diese divs bzw. spans überhaupt? Warum formatierst du nicht das a-Element direkt? Auch ein a kann display:block bekommen, falls nötig.
»»
tatsächlich...ok, auch umgesetzt
Warum positionierst du die Elemente innerhalb des Menüs noch einmal absolut? Wieso lässt du sie nicht im normalen Fluss, sodass sie untereinander angezeigt werden? Abstände kannst du auch mit margin und padding umsetzen. Du bist anscheinend einer »alles absolut positionieren«-Idee verfallen.
»»
jup, das hatte ich zuerst, dann ging ich auf fehlersuche und habs absolut positioniert. Ist wieder geändert auf relativ.
Nutze ein Selektor wie »#menu a«, um allen a-Elemente im Menü gleiche Basis-Formatierungen zu geben. Dann brauchst du ein Zehntel des jetzigen Quellcodes.
»»
getan!
Ferner wären für dich CSS-Sprites interessant. Da fasst man die verschiedenen Status-Grafiken (Normal und Highlighted) in einer zusammen und verschiebt diese beim :hover bloß mit background-position. Das sorgt für ein schnelleren Wechsel beim Mouseover, weil der zweite Status bereits von Anfang an geladen ist.
Mathias
das schau ich mir nochmal genauer an. cool, super antwort.