Linkbereich von <a> vergrößern?

[Noel]

Hallo!

Ich habe eine Frage, wobei ich mir nicht hundertprozentig sicher bin ob die Lösung mit CSS realisierbar ist - ich hoffe es jedoch.

Bisheriger Weg:

  
<div class="menue">  
  <div><a href="example.com/#1">Link 1</a></div>  
  <div><a href="example.com/#2">Link 2</a></div>  
  <div><a href="example.com/#3">Link 3</a></div>  
  <div><a href="example.com/#4">Link 4</a></div>  
</div>  

Das ganze folgendermaßen über CSS formatiert:

  
a {  
  color:#000000;  
  padding:2px;  
  margin-top:5px;  
  margin-bottom:5px;  
  text-decoration:none;  
  width:50px;  
  height:100px;  
  }  
  
.menue {  
 background-image:url(menue_hintergrund.gif);  
 background-repeat:repeat;  
 padding:10px;  
 margin-top:40px;  
 max-width:97px;  
 width:97px;  
 height:480px;  
 }  

Was bewirkt dass die Links ordentlich links in einem grafischen Kästchen untereinander aufgereiht sind, und leicht grün hinterlegt werden wenn der User mit der Maus drüberfährt. Die Hintergrundgrafik "menue_hintergrund.gif" hat eine Breite von sagen wir 200px. Das Problem: Die grüne Fläche mit der der Text jedes Links hinterlegt wird soll die gesamte Breite der Hintergrundgrafik ausfüllen, also 200px. Da ich schwerlich a in der .css mit "width=..." formatieren kann, bin ich ein bisschen ratlos wie das zu realisieren ist. Vom Einsatz von JS und anderen Spielereien will ich eigentlich absehen.

Ich freue mich auf konstruktive Antworten.
Beste Grüße,
Noel