Demora en cambiar una imagen por otra

[ci2000]

Hola, hice una web dónde las opciones tienen una imagen de fondo y al pasar el mouse por encima cambia por otra.

El problema es que demora en cambiar la segunda imagen cuando el mouse está sobre la opción.

Lo verán aquí: www.diariocambio.com.uy

¿Qué debo hacer para que no demore?

Código:

<div class="menu">
	  <a href="index.php?seccion=inicio&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "inicio") {print "class='actual'";} ?>id="inicio">Inicio</a>	  
	  <a href="index.php?seccion=locales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "locales") {print "class='actual'";} ?>id="locales">Locales</a>	  
	  <a href="index.php?seccion=nacionales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "nacionales") {print "class='actual'";} ?>id="nacionales">Nacionales</a>
	  <a href="index.php?seccion=policiales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "policiales") {print "class='actual'";} ?>id="policiales">Policiales</a>	  
	  <a href="index.php?seccion=deportes&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "deportes") {print "class='actual'";} ?>id="deportes">Deportes</a>
	  <a href="index.php?seccion=sociales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "sociales") {print "class='actual'";} ?>id="sociales">Sociales</a>
	  <a href="index.php?seccion=funebres&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "funebres") {print "class='actual'";} ?>id="funebres">Fúnebres</a>
	  <a href="index.php?seccion=politica&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "politica") {print "class='actual'";} ?>id="politica">Política</a>
	  <a href="index.php?seccion=rurales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "rurales") {print "class='actual'";} ?>id="rurales">Rurales</a>
	  <a href="index.php?seccion=cartas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "cartas") {print "class='actual'";} ?>id="cartas">Cartas</a>
	  <a href="index.php?seccion=columnistas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "columnistas") {print "class='actual'";} ?>id="columnistas">Columnistas</a>	  
	  <a href="index.php?seccion=varios&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "varios") {print "class='actual'";} ?>id="varios">Varios</a>
	</div>

Código:

.menu a
	{
	display:block;
	background-position:center 5px;
	background-repeat:no-repeat;
	width:80px;
	height:20px;
	float:left;
	font-size:13px;
	color:#FFFFFF;
	text-align:center;
	font-family:Arial;
	text-decoration:none;
	padding:43px 0 0 0;
}
	
.menu .alt { display:none; }
.menu a#inicio { background-image: url(../images/inicio_color.png); background-color:#202020;}
.menu a#locales { background-image: url(../images/locales_blanco.png); background-color:#333333;}
.menu a#nacionales { background-image: url(../images/nacionales_color.png); background-color:#202020;}
.menu a#policiales { background-image: url(../images/policiales_blanco.png); background-color:#333333;}
.menu a#deportes { background-image: url(../images/deportes_color.png); background-color:#202020;}
.menu a#sociales { background-image: url(../images/sociales_blanco.png); background-color:#333333;}
.menu a#funebres { background-image: url(../images/funebres_color.png); background-color:#202020;}
.menu a#politica { background-image: url(../images/politica_blanco.png); background-color:#333333;}
.menu a#rurales { background-image: url(../images/rurales_color.png); background-color:#202020;}
.menu a#cartas { background-image: url(../images/cartas_blanco.png); background-color:#333333;}
.menu a#columnistas { background-image: url(../images/columnistas_color.png); background-color:#202020;}
.menu a#varios { background-image: url(../images/varios_blanco.png); background-color:#333333;}

.menu a:hover {
	font-weight:bold;	
	padding:40px 0 0 0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
}

.menu a#inicio:hover { background-image: url(../images/inicio_blanco.png); border-bottom-color:#F9CD00;}
.menu a#locales:hover {	background-image: url(../images/locales_color.png);	border-bottom-color: #ffffff;}
.menu a#nacionales:hover { background-image: url(../images/nacionales_blanco.png); border-bottom-color:#F9CD00;}
.menu a#policiales:hover { background-image: url(../images/policiales_color.png); border-bottom-color: #ffffff;}
.menu a#deportes:hover { background-image: url(../images/deportes_blanco.png);	border-bottom-color: #F9CD00;}
.menu a#sociales:hover { background-image: url(../images/sociales_color.png); border-bottom-color: #ffffff;}
.menu a#funebres:hover { background-image: url(../images/funebres_blanco.png); border-bottom-color: #F9CD00;}
.menu a#politica:hover { background-image: url(../images/politica_color.png); border-bottom-color: #ffffff;}
.menu a#rurales:hover {	background-image: url(../images/rurales_blanco.png); border-bottom-color: #F9CD00;}
.menu a#cartas:hover { background-image: url(../images/cartas_color.png); border-bottom-color: #ffffff;}
.menu a#columnistas:hover {	background-image: url(../images/columnistas_blanco.png); border-bottom-color: #F9CD00;}
.menu a#varios:hover { background-image: url(../images/varios_color.png); border-bottom-color: #ffffff;}

.actual {
	color:#3300CC;
	font-weight:bold;
}

Gracias desde ya por las respuestas.
Saludos

[jomaruro]

Hola:

En el propio buscador del foro CSS busca información sobre sprites css.

Saludos.