Agrandir a:hover ?

Bonjour
Dans une barre de navigation, il me faut lors du a:hover obtenir une mise en forme telle que sur l'image ci dessous:

Je pensais donc (bêtement?) augmenter la valeur width initiale du a.
Résultat: rien!
Voici les lignes concernées:

nav#haut ul{
	position: absolute;
	top: 2%;
	right: 1%;
	width: 72%;
	margin: 0;
	padding: 0;
}
nav#haut li{
	float: left;
	margin-right: 3%;
	margin-bottom: 2%;
	padding: 0.8%;
	border: none;
	list-style: none;
	height: 44px;

}
nav#haut li a { 
	padding: 0.3em;
	width: 20%;
	height: 44px;
    line-height: 1em ; 
    text-align: left; 
	font: bold 1.5em "Pupcat", Helvetica, Verdana, Arial, sans-serif;
    color: #fff ;
	letter-spacing: 0.1em;
	background: #c6b08b;
	text-decoration: none;
}

nav#haut li a:hover, nav#haut li a:focus, nav#haut li a:active { 
    background: url(../images/end-nav.jpg) right top no-repeat, #000 ; 
}

L'image du background sur a:hover est celle-ci:

Auriez vous une idée, une solution?

D'avance merci.

Ou utiliser CSS3 et scale