Problema con un botom

Que a todos¡¡ Tengo un problema con un botom.Es un enlace que tiene una imagen,y al pasar el raton tiene otra de sustitucion lo que me ocurre es que no me cambia,osea la segunda imagen aparece,pero la primera nose va se queda.El codigo lo tengo asi:


#pie1 ul {
float: left;
margin-top:10px; /*La primera imagen esta en el html */
margin-bottom: 10px;
margin-left: 30px;
margin-right: 45px;
width: 85px;
height: 85px;
}

#pie1 ul li {
margin-left: 20px;

}

#pie1 ul li a:hover {


background: url("http://migato8.no-ip.info/imagenes/aaa.png");
width: 85px;
height: 85px;
display:block;
z-index: 10;
background-repeat: no-repeat;
background-position: -20px ;

}


Entonces e probado con z-index pero nada al pasar el raton aparece la segunda imagen pero la primera tambien.Deberia probar con display:none para la primera imagen??? pero entonces no me apareceria la primera imagen no? O con una clase especial ¡¡¡¡

Ya lo resolvi pero tuve que usar la tecnica rollover.Osea de dos imagenes hacer una con el gimp o fotoshop.Luego moverla con position dependiendo...

Lleva mucho trabajo por que es el pie de una pagina y van a ser 5 o 6 imagenes.Os pongo el codigo por si lo quereis ver, no creo que tengais ninguna duda:


#pie5 {

margin-top: 10px;
margin-bottom: 10px;
margin-left: 60px;
margin-right: 45px;
width: 85px;
padding: 0;
float: left;
margin-bottom: 10px;

overflow : hidden; /* para los floats para que acaben */
zoom: 1; /* para el explorer 6 */

}



#pie5 li {

float: left;
width: 85px;
margin-left: 0px;



}


#pie5 a {



display: block;
width: 85px;
height: 90px;
background-image: url("http://migato8.no-ip.info/imagenes/camarax.png");

/* Esta es la imagen que contiene dos enverdad luego las muevo para que aparezcan una con position */

background-position:40px -25px;
background-repeat: no-repeat;



zoom: 1; /* para el explorer 6 */

}
#pie5 a:hover {

background-position: 100% 0;
background-repeat: no-repeat;
width: 85px;
height: 90px;

}


Y ya esta no tiene mas¡¡¡