Menu en lista con imagenes de sustitucion

[webosiris]

Si hago esto, el menu me sale en vertical

perdón, fue un gazapo al escribir mi mensaje, en vez de display:block, usa display:inline-block

y sobre la sustitución de img, ya te dije, usa sprites (hasta te enlacé un artículo que lo explica muy bien). Básicamente:
- une todas tus img en 1 sola, así en vez de casita.png sobre.png sobre_on.png, etc tienes 1 sola, iconos.png. Eso lo haces con un editor de img, copiando las img una debajo de la otra. Si tus img originales median 45px de alto y 45px de ancho y unes 6 img, la img nueva te va a quedar de 45px de ancho y 270px de alto.

- deja el css de la siguiente manera:

Código CSS:

#iconos a{
    display:inline-block;
    height:45px;
    width:45px;
    background:url(img/iconos.png);
}
 
#iconos a.icono1{
    background-position:0 0;}
#iconos a.icono1:hover{
     background-position:0 -45px;}
 
#iconos a.icono2{
    background-position:0 -90px;}
#iconos a.icono2:hover{
    background-position:0 -135px;}
 
#iconos a.icono3{
    background-position:0 -180px;}
#iconos a.icono3:hover{
    background-position:0 -225px;}
 

eso es claro considerando iconos de 45px de alto, cambia los tamaños a los que quieras usar.
PD: la posición del icono1 en realidad es innecesaria porque esa es la posición por defecto, la puse igual para que se entendiera mejor