list-style-image von einzelnen <li>s ändern

[A-le-xan-der]

Moin,

ich habe ein Navigationsmenü (Liste) nach folgendem Schema in HTML gebastelt:

<ul class="menue">
<li class="menuebutton"><a href="1.htm">Seite 1</a></li>
<li class="menuebutton"><a href="2.htm">Seite 2</a>
<ul class="menue">
<li class="menuebutton"><a href="2b.htm">Unterseite 2b</a></li>
<li class="menuebutton"><a href="2c.htm">Unterseite 2c</a></li>
<li class="menuebutton"><a href="2d.htm">Unterseite 2d</a></li>
<li class="menuebutton">
</li>
<li class="menuebutton"><a href="3.htm">Seite 3</a>
<li class="menuebutton"><a href="4.htm">Seite 4</a>
</ul>

Die Liste ist per CSS so formatiert, daß anstelle des Standard-Aufzählungszeichens eine Grafik angezeigt wird:

.menue { list-style-image: url(grafik.gif) }

Funktioniert alles prima.
Nun möchte ich es aber so haben, daß beim Hovern die Grafik durch eine andere ersetzt wird, qusi so:

.menuebutton a:hover { list-style-image: url(grafik2.gif) }

Das funktioniert nur im MSIE bis Version 7, da list-style-image standardgemäß nicht auf <a> anwendbar ist, andere Browser zeigen also beim Hovern keine Änderung.
Wenn ich list-style-image auf <li> anwende ( .menue li:hover { (...) } ), funktioniert es zwar mit anderen Browsern, allerdings wird dann beim Hovern einer UNTERseite auch die direkt übergeordnete Seite als gehovert angezeigt (also beim Hovern von z.B. Seite 2b wird sowohl die Grafik von der Seite als auch die von Seite 2 ausgetauscht).
Dieses Verhalten der Browser ist korrekt - doch wie kriege ich es hin, daß auch bei Unterseiten nur die Grafik der jeweiligen Unterseite ausgetauscht wird?
Ich habe schon so lange rumprobiert, aber ich finde keine Lösung. (Es kann gerne mit CSS 3 sein, aber kein JavaScript oder PHP.) Die Variante, die jeweils beiden Grafiken mit CSS :before einzubinden möchte ich nicht machen; nur die Hovergrafik mit :before einzubauen klappt nicht, da die Hovergrafik dann zusätzlich zur normalen (daneben) angezeigt wird.

Hat jemand eine Idee?