Un menú con sprites

JMiur

Estos menús son una demostración práctica y muy original del uso de sprites para crear efectos.

Siempre se parte de lo mismo, el menú, es una lista:

<div class="navi1">
  <ul>
    <li class="sm1"><a href="URL_enlace1"></a></li>
    <li class="sm2"><a href="URL_enlace2"></a></li>
    <li class="sm3"><a href="URL_enlace3"></a></li>
    <li class="sm4"><a href="URL_enlace4"></a></li>
    <li class="sm5"><a href="URL_enlace5"></a></li>
  </ul>
</div>

Pero, como se ve, no hay textos en los enlaces ya que todo el menú es una imagen transparente que tiene dos partes, la de arriba es la que vemos por defecto y la de abajo es la que vemos cuando el ratón se coloca encima

La clave es el CSS y usar la aritmética para calcular cada desplazamiento. No es mucho lo que puede explicarse del tema, hay que mirar y probar:

.navi1 {
  display: block;
  height: 72px;
  margin:0 auto;
  position: relative;
  width: 525px;
}
.navi1 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi1 ul li {
  height: 72px;
  background-image: url(URL_imagen);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  padding-top: 5px;
  position: absolute;
}
.navi1 ul li a {
  display: block;
  height: 100%;
  width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }