problema con menu css horizontal en img dos estados

[rufus]

No me funciona el cambio de imagen en un menú css horizontal con varias imágenes de dos estados cada una( cada sección de la web tiene dos imágenes)

Código HTML:

<div id="menu">
            <ul>
                <li><a class="inicio" href="index.php?page=home" ><span><img src="imagenes/botones/inicio.png"></span></a></li>
              
            </ul>
        </div>
 

Código css:

Código CSS:

/* css del menu*/
#menu
{
    margin-top: 60px;
     width: 940px;
     height: 50px;
 
}
 
#menu li
{
   display: inline;
   text-align: center;
   margin: 0 10px 0 0;
}
/*#menu li.inicio{}*/
}
.inicio span:hover{ background-image: url(imagenes/botones/inicio2.png);}
 
/* Fin css del menu*/
 

He probado varias cosas y no me funciona ninguna, el codigo lo he copiado de una web que tiene el menu distribuido por el header (no esta en linea ni horizontal ni verticalmente). pero ahora al ponerlo yo horizontal en linea... he cambiado el codigo por que si no lo pongo como lo tengo ahora ni siquiera se veria la imagen de "inicio" del menu. ahora se ve la imagen pero no cambia al pasar el raton por encima....

[rufus]

Ya lo he solucionado dejo el codigo:

Código CSS:

/* css del menu*/
#menu
{
   
     width: 940px;
     height: 60px;
     margin-top: 55px;
 
}
 
#menu a
{
    position: relative;
}
 
#menu li a span
{
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    cursor: pointer;
 
    display: inline;
 }
 
 
 
.inicio
{
    top: 15px; left: 5px;
}
 
 
 
.inicio span
{
    width: 100px;
    height: 44px;
    background-image: URL(imagenes/botones/inicio.png);
}
 
.inicio span:hover
{
       background-image: URL(imagenes/botones/inicio2.png);
}
 
/* Fin css del menu*/
 

Código HTML:

<div id="menu">
            <ul>
                <li><a class="inicio" href="index.php?page=home"><span></span></a></li>
            
            </ul>
        </div>