Anzitutto mi sono dimenticato di dire che gli pseudo-elementi (tipo :first-letter) non sono riconosciuti da tutti i browser: forse non funzionano in IE, mentre dovrebbero andare in Mozilla / Firefox.

Poi hai nell'ordine (per chiarezza copio solo gli elementi che interessano il menuButton):
(1) .menuBar
(2) .menuBar a.menuButton,
(3) .menuButton a:first-letter
(4) .menuBar
(5) .menuBar a.menuButton
(6) .menuBar a.menuButton:hover
(7) .menuBar a.menuButtonActive,
(8) .menuBar a.menuButtonActive:hover

Le specifiche (5) e (6) chiaramente sovrascrivono la (3).
La (3) va quindi spostata DOPO la (6)
Inoltre io scriverei:
.menuBar a.menuButton:first-letter

Non so come si comporta la pseudo-casse :hover in tal caso. Non ho trovato da nessuna parte come si relazionano pseudo-classi e pseudo-elementi.