[html/css] lien sur background d'un menu

Bonjour,

je n'arrive pas à trouver la réponse dans le site (et le web) aussi j'ouvre ce sujet.

Sur mon petit site web, j'ai un menu a gauche avec divers liens. je vous mets le code

html :

	 <ul>
		   <li><a href="accueil.php" title="Page d'accueil">Accueil</a></li>
		   <li><a href="societe.php" title="Présentation d'Aquabulle">Notre société</a></li>
		   <li><a href="poissons.php" title="Liste des poissons">Nos poissons</a></li>				
		   <li><a href="contact.php" title="Formulaire de contact">Nous contacter</a></li>
		   <li><a href="actualite.php" title="Actualités"> Actualités</a></li>
		   <li><a href="compte.php" title="Mon compte personnel">Mon compte</a></li>
	 </ul>

et css :

#menu li /*ligne des menus*/
{
   list-style-type:none;
   background-image:url(images/base_ligne_menu.png);
   background-repeat:no-repeat;
   padding-bottom: 4px;   
   padding-top: 3px; /*enlever un pixel si on ne veut pas qu'il y ai du blanc entre les lignes*/
   text-indent: 5px; /*décalage de la prose*/
}

#menu li:hover /*ligne des menus quand on passe dessus*/
{
   background-image:url(images/base_ligne_menu_hover.png);
}

tout s'affiche bien mais le problème est que le lien n'est actif que sur les mots 'accueil'; 'notre société'; et le reste. Or j'aimerai que l'image de background soit cliquable elle-aussi.

Je n'ai pas envie de créer des boutons portant ces mots car cela limite l'évolutivité du site.

J'ai essayé d'attacher l'image du background au lien lui-même mais du coup, l'image ne s'affiche qu'autour des mots 'accueil'; 'notre société'... eux-mêmes. Ce serait la solution s'il y avait un moyen d'obliger le navigateur a afficher la totalité de l'image de fond. Connaissez-vous ce moyen ? ou avez-vous une idée pour que l'image de fond soit cliquable elle-aussi ?