vertikales Menü - im "Paddingbereich" wird nicht gehovert

[juewi]

Hallo allerseits!

Ich mal wieder:

Habe hier versucht, ein simples Menü mit CSS zu erstellen, das bei Hover über die Listenpunkte die HG-Farbe ändert und der Link geklickt werden kann.

Durch das Padding (möchte großzügigen Rahmen um die Listenpunkte) entstehen mit leider 2 Probleme NUR IN DIESEM PADDING-BEREICH:
1. a:hover wirkt nicht = Linkfarbe wird nicht weiss
2. der Link ist nicht klickbar
(im TEXT-Bereich funktioniert es)

Weiteres Problem:
3. wieso schieben sich die Listenpunkte aus ul rechtsbündig raus???

Wie löse ich die Probleme? Oder gehe ich das ganz falsch an?

Danke!

ul#navi {  
width: 150px;  
border: 1px dashed #ff0000;  
}  
ul#navi li {  
width: 150px;  
padding: 1.5em;  
margin-top: 0.5em;  
margin-bottom: 0.5em;  
text-align: center;  
list-style: none;  
border: 1px dashed #000000;  
}  
ul#navi li:hover, ul#navi a:hover {  
background: #000000;  
color: #ffffff;  
}  

<ul id="navi">  
  <li><a href="#">TESTLINK</a></li>  
  <li><a href="#">TESTLINK</a></li>  
  <li><a href="#">TESTLINK</a></li>  
  <li><a href="#">TESTLINK</a></li>  
  <li><a href="#">TESTLINK</a></li>  
  <li><a href="#">TESTLINK</a></li>  
</ul>  

LG, Jürgen