Menu em CSS

Pessoal, é o seguinte:

Fiz um Menu em CSS aqui, que já tá todo montado. Mas queria fazer o a:hover mudar a imagem de fundo ao passar o mouse por cima. Porém, ao utilizar o mesmo, ele bota a imagem no fundo do texto. Como faço pra ele mudar o fundo cinza e deixá-lo com a minha imagem vermelha?

/applications/core/interface/imageproxy/imageproxy.php?img=http://img691.imageshack.us/img691/2006/menuahover.jpg&key=af941e4700b444edd5ac102a0331ed8bcffc4e5b19f1f8573960bc4c4462266a" alt="Imagem Postada" />

/applications/core/interface/imageproxy/imageproxy.php?img=http://img59.imageshack.us/img59/1562/menuqq.jpg&key=4d24d26166532428de1ee2eb58a7fc88b081bedef1eb82a7c6dbf9bc6d6c35bf" alt="Imagem Postada" />

o código é esse:

MENU HTML >

<div id="menu_middle">

 <div id="menu_borda_left"><a href="#">HOME</a></div>
 <div class="divisor"></div>
 <div class="menu"><a href="#">QUEM SOMOS</a></div>
 <div class="divisor"></div>
 <div class="menu"><a href="#">EVENTOS</a></div>
 <div class="divisor"></div>
 <div class="menu"><a href="#">CONVÊNIOS</a></div>
 <div class="divisor"></div>
 <div class="menu"><a href="#">LINKS</a></div>
 <div class="divisor"></div>
 <div id="menu_borda_right"><a href="#">CONTATO</a></div>

 </div>

CSS relativo à esta parte em questão >

#menu_middle{width:681px; height:63px; float:left; background-image:url(../img/menu.middle.jpg);}
#menu_middle a:hover {background-image:url(../img/busca.top.jpg); color:#000000;}

.menu{width:auto; height:63px; float:left; margin-left:32px; margin-right:32px; border-left:32px; border-right:32px; line-height:75px;}