Basada en imágenes de menú CSS

Hola a todos. Necesitas ayuda. ¿No está seguro de si estoy pidiendo la corrección de este. Pero Im buscando un profesor en la imagen basada en menús css. He encontrado un sólo pero yo realmente no conseguirlo. Necesito una de principio a fin. Cuando digo empezar como la mejor manera de crear en Photoshop. He visto hacer cuando usted tiene dos o tres imágenes de cada palabra y, a continuación, cuando usted haga clic en rollover o que vea una imagen diferente. Cuando me disected las imágenes, parece que crean 2 o 3 imágenes muy cerca en el diseño y, a continuación, ayuda a la CSS con la posición de la imagen. Tengo entendido parte de ella, pero hay algo que no obtienen Im. Aquí hay un enlace a la que he encontrado: http://www.webdesignerwall.com/tutorial ... -css-menu/ , Si alguien puede encontrar un más descriptivo, yo estaría muy agradecida.

Gracias de antemano!

La idea es muy simple:

Aquí está la CSS:

(ul
lista de estilo: ninguno;
)

Li (
position: relative;
se suman: a la izquierda;
)

#(casa
fondo: URL (home1.jpg) si no se repita;
)

#casa: hover (
fondo: url (home2.jpg) si no se repita;
)

#contacto (
fondo: url (contact1.jpg) si no se repita;
)

#contacto: hover (
fondo: url (contact2. jpg) de no repetir;
)

Aquí está el XHTML:

<ul>
<li id="home"> </ li>
<li id="contact"> </ li>
</ ul>

sólo tienes que hacer home1.jpg y home2.jpg 2 botones y lo mismo ocurre para el contacto y cuando se sitúe más de la li el botón cambia y, por supuesto, otras características se pueden agregar como la anchura y la altura por lo que la li tener la dimmensions mismo como las imágenes!:)
Espero que este hellps ..

A continuación es lo que he usado. Y funciona en IE y se rompe en todo lo demás. Pone a estos extraños espacios en blanco junto a cada imagen. Creo que voy a intentar su camino en breve. Just gettting un poco frustrado.


CSS:

. menú (
margin: 0;
padding: 0;
lista de estilo: ninguno;
antecedentes: #FFF;
position: relative;
left: 188px;
top: 231px;
)
. Li menú (
padding: 0;
margin: 0;
margen derecha: 37px;
lista de estilo: ninguno;
fondo-repito: si no se repita;
altura: 28px;
)
. li un menú,. menu li a: visitó (
pantalla: bloque;
text-decoration: none;
texto-guión:-3000px;
altura: 28px;
fondo-repito: si no se repita;
)
. casa (fondo-image: url (images / homeHover_btn.jpg); width: 84px;)
. casa a (fondo-image: url (images / home_btn.jpg);)
. entretenimiento (fondo-imagen: url (images / entHover_btn.jpg); width: 216px;)
. entretenimiento (un fondo de la imagen: url (images / ent_btn.jpg);)
. diseñadores (fondo-imagen: url (images / designHover_btn. jpg); width: 148px;)
. diseñadores (un fondo de la imagen: url (images / design_btn.jpg);)
. modelos (
fondo de la imagen: url (images / modelsHover_btn.jpg);
width: 113px;
)
. modelos a (
fondo de la imagen: url (images / model_btn.jpg);
)
ul.menu li a: hover (fondo: none;)
. menu li (float: a la izquierda;)
. menú: después de (content: ". "; Pantalla: bloque; altura: 0; claro: ambos; visibilidad: oculto;)

HTML:

<ul class="menu">
<li class="home"> <a href = " #"> Inicio </ a> </ li>
<li class="entertainment"> <a href = " #"> Entretenimiento </ a> </ li>
<li class="designers"> <a href = " #"> Diseñadores </ a> </ li>
<li class="models"> <a href = " #"> Modelos </ a> </ li>
</ ul>

Por cierto tengo que poner estas en un lugar exacto. Después de haber problemas para acceder a mi servidor, pero aquí es una captura de pantalla:

Resueltas. Gracias