La idea originalment la vaig veure a Stylegala i la solució que he aplicat és, en essència, igual.

La idea és fer que cada ítem de la llista ocupi el lloc pròpi i el de tots els anteriors però quedant per sota d'aquests.

I cada ítem està representat, en aquest cas, per un quadrat de 16x16 pixels que per fer-ho pràctic i suavitzar la càrrega d'imatge es pot fer en una sol arxiu.

S'haurà de tractar els ítems com a caixes amb posició absoluta per aconseguir el solapat i per tant l'ul haurà de ser relatiu per marcar el p(0,0).

ul {
   position: relative;
   }
li {
   position: absolute;
   top: 0;
   left: 0;
   }

Com que el conjunt dels 10 ítems a mostrar sumen 196px (s'ha de comptar amb els espais entre quadrats) donarem aquest valor a l'amplada de l'ul i aprofitarem per eliminar-li els estils per defecte.

ul {
  margin: 0;
   width: 196px;
   padding: 0;
   list-style: none;
   position: relative;
   }

Com que tots els fills tenen posició absoluta l'ul no s'expandirà i caldrà donar una alçada explícita. En aquest cas 16px.

ul {
  margin: 0 auto;
   width: 196px;
   padding: 0;
   list-style: none;
   position: relative;
   height: 16px;
   }

A més a més l'ul servirà per mostrar la imatge dels 10 quadrats inactius:

ul {
  margin: 0 auto;
   width: 196px;
   padding: 0;
   list-style: none;
   position: relative;
   height: 16px;
   background: url(questio-4-exemple.png) no-repeat -200px 0;
   }

La posició de -200px de la imatge és deguda a que els 10 quadrats actius estan abans que els inactius.

Ocultem el text dels enllaços amb un RIR —no pas el mètode Leahy/Langridge tot i que serviria igualment—

a {
   display: block;
   overflow: hidden;
   text-indent: -1000px;
   height: 16px;
   }

El display: block és necessari ja que l'element a és inline per defecte, i l'hem de tractar com una caixa de bloc.

L'alçada de 16px —la del quadrat— és per assegurar que sigui quin sigui el tamany de lletra es veurà bé.

Ara cal donar l'amplada als ítems. Per això és necessari tenir id per cada un.

#item1 {
   z-index: 9;
   }
#item1 a {
   width: 20px;
   }
#item2 {
   z-index: 8;
   }
#item2 a {
   width: 40px;
   }
[...]

Cada ítem tindrà com a amplada 20px més l'amplada dels seus anteriors (20px perquè són 16px del quadrat més 4px de l'espai entre quadrats).

La posició a l'eix Z haurà de ser inversa a la posició a la llista, és a dir: El darrer ítem —el 10— tindrà valor 0, el novè tindrà valor 1, etc..

Per tant el darrer ítem tindrà un codi tal com:

#item9 {
   z-index: 1;
   }
#item9 a {
   width: 180px;
   }
#item10 a {
   width: 200px;
}

El z-index del darrer ítem el podem elidir.

Per últim caldrà afegir el comportament de l'estat actiu dels enllaços:

a:hover {
   background: url(questio-4-exemple.png) no-repeat 0 0;
   }

La mida dels li s'encarregarà de mostrar només el fragment necessari d'imatge.

Com a extra es pot mostrar el text de l'ítem a l'estat actiu:

a:hover {
   background: url(questio-4-exemple.png) no-repeat 0 0;
   overflow: visible;
   text-decoration: none;
   color: #000;
   text-indent: 200px;
   }

Aquest efecte extra no funciona correctament en Internet Explorer Amb l'overflow: visible deixem veure el text desplaçat que haviem ocultat amb el overflow: hidden. El text-indent ens permet colocar-lo al final de la fila de quadrats.

Podeu veure l'exemple funcionant