Probleme :hover

Bonjour,

Je souhaite faire un menu avec des liens qui changent de fond quand on passe la souris dessus. J'ai donc fait le code html suivant:

<div id="middle-menu"><a href="">un</a><a href="">deux</a><a href="">trois</a><a href="">quatre</a></div>

et ce code css:

#middle-menu a
{
	color: rgb(71,71,71);
	padding: 4px 12px;
	border-radius: 10px;
	margin: 0 30px;
        border: 1px solid black;
}
#middle-menu a:visited
{
	color: rgb(71,71,71);
	padding: 4px 12px;
	border-radius: 10px;
	margin: 0 30px;
}
#middle-menu a:hover
{
	background-color: rgb(102, 102, 102);
	color: #fff;
}
#middle-menu
{
	line-height: 50px;
	border: 1px solid black;
}

Mon problème, c'est que le lien ne change pas de fond quand la souris passe a l'interieur de la bordure du <a></a> ni meme quand elle est sur le texte, mais quand elle passe au dessus d'une zone juste en dessous du texte... et j'aimerais que le hover s'active quand la souris rentre dans la bordure. C'est vraiment bizarre et je n'ai trouvé aucune solution.

Pouvez-vous m'aider svp?

Merci