Unvollständiger Hover-Bereich diverser Links in einer Liste

[Ashura]

Hallo.

Da ich schon ziemlich am verzweifeln bin, und ich absolut, _wirklich_ absolut keine Ahnung habe, welche Schlüsselbegriffe mir im Archiv oder bei Google helfen können, mein Problem zu beseitigen, bitte ich nun euch um Hilfe.

Ich habe eine einfache Navigation mittels <ul> Liste erstellt. In den Geckos und Opera sieht es erwartungsgemäß gut aus.
Doch, wie könnte es anders sein, tut sich der IE mächtig schwer mit einigen Eigenschaften.

Hier der zuständige Code:

<ul>
  <li><a class="nav" href="#">Dummy1</a></li>
  <li><a class="nav" href="#">Dummy2</a></li>
  <li><a class="nav" href="#">......</a></li>
</ul>

Das normale Stylesheet:

li{list-style:none;margin-bottom:2%;}
li>a:link, li>a:visited{padding:2% 10% 2% 15%;border:1px solid #999;background-color:#000;display:block;}
li>a:hover{color:#fff;background-color:#333;border:1px solid #ccc;}
li>a:active{color:#000;background-color:#fff;}

Hier das spezielle IE-CSS:
li{margin-bottom:-1em;}
a.nav:link, a.nav:visited{padding:0.3em 0.2em 0.3em 2em;border:1px solid #999;background-color:#000;display:block;}
a.nav:hover{color:#fff;background-color:#333;border:1px solid #ccc;}
a.nav:active{color:#000;background-color:#fff;}

Das Problem liegt hierbei in der "Erfassungsfläche" der Elemente. Alle modernen Browser "verlinken" den gesamten <a> Block, also unabhängig, ob man wirklich über das Wort oder einen Freiraum im Block "hovert".
Im IE jedoch sind wirklich nur die Wörter verlinkt, der Block scheint nur als Zierde da zu sein.

Das Kuriose: Der erste Link wird korrekt "gehovert"...

Ich würde mich freuen, wenn ihr mir zumindest einen Tipp geben könntet, wonach ich suchen muss.

Gruß, Ashura