Donat un XHTML tal com:
<ul>
<li id="item1"><a href="{URI}">ítem1</a></li>
<li id="item2"><a href="{URI}">ítem2</a></li>
<li id="item3"><a href="{URI}">ítem3</a></li>
<li id="item4"><a href="{URI}">ítem4</a></li>
<li id="item5"><a href="{URI}">ítem5</a></li>
<li id="item6"><a href="{URI}">ítem6</a></li>
<li id="item7"><a href="{URI}">ítem7</a></li>
<li id="item8"><a href="{URI}">ítem8</a></li>
<li id="item9"><a href="{URI}">ítem9</a></li>
<li id="item10"><a href="{URI}">ítem10</a></li>
</ul>
Volem aconseguir mostrar cada ítem com un quadrat clicable, sense que es vegi el text, l'un al costat de l'altre tal com mostra la figura 1
Al passar el mouse per sobre de cada ítem canviaran de color ell i els seus predecessors tal com mostra la figura 2.
Quin CSS faries?
Nota: Les imatges s'hauria de saber breument com són.