Menu rollover

Bonjour!

J'ai un soucis avec mon menu et je sollicite votre aide

Mon menu est composé de 4 éléments. Chaque élément est associé à une image et donc, il n'y a pas d'affiche de texte proprement dit.
Je veux que l'image change au passage de la souris et j'aimerais utiliser la technique "une seule image".

Voici mon code css :

#menu {
	width:100%;
	height:31px;
	background-color:#fff;
	text-align:center;
}

#menu ul {
	list-style-type: none;
	margin:0;
	padding:0;
}

#menu li {
	margin: 0;
	padding: 0 ;
	float:left;
}

#menu ul a {
	list-style-type: none;
	display: block;
	height:31px;
	text-indent: -5000px;
}

#menu ul a#menu_programmation{
	background-image: url(images/menu_programmation.jpg) no-repeat;
	width: 158px;
}

#menu ul a#menu_programmation:hover{
	background-image: url(images/menu_programmation.jpg) no-repeat 0 -31px;
}

[ .................... ]

#menu ul a#menu_contact{
	background-image: url(images/menu_contact.jpg) no-repeat 0 0;
	width: 91px;
}

#menu ul a#menu_contact:hover{
	background-image: url(images/menu_contact.jpg) no-repeat 0 -31px;
}

Et mon html :

<div id="menu">
	<ul>
		<li><a href="#" id="menu_programmation">Programmation</a></li>
		<li><a href="#" id="menu_groupes">Groupes</a></li>
		<li><a href="#" id="menu_staff">Staff</a></li>
		<li><a href="#" id="menu_contact">Contact</a></li>
	</ul>
</div>

Voici l'exemple en ligne : http://www.gertruderockfestival.com/construct/gertrudev3/


Vous verrez que les images ne s'affiche... Ce qui est étrange c'est qu'avez Firebug, je ne vois pas la propriété background !


J'espère que vous pouvvez m'aider


Merci beaucoup!

LarZuK