Problema con menú css sprites

[xFantaSx]

El tamaño se podría reducir si:
-Reduces el tamaño de cada botón, igualmente tendrías que reducir el tamaño de las imágenes.
-Haces un div contenedor y dejas el menú en dos filas.
-Quitas algunos botones.

Otra cosa es que en tu html debería ser así:

Código HTML:

<div class="navi1">
  <ul>
    <a href="#"><li class="home"></li></a>
    <a href="#"><li class="looks"></li></a>
    <a href="#"><li class="belleza"></li></a>
    <a href="#"><li class="viajes"></li></a>
    <a href="#"><li class="shopping"></li></a>
    <a href="#"><li class="lector"></li></a>
    <a href="#"><li class="featuring"></li></a>
    <a href="#"><li class="premios"></li></a>
    <a href="#"><li class="varios"></li></a>
    <a href="#"><li class="roypedrin"></li></a>
    <a href="#"><li class="contacto"></li></a>
 </ul>
</div>
 

Si te fijas el link "a" está conteniendo el elemento de la lista y no el elemento al link, de esta forma quedará linkeado y no tendrás que hacer lo que está en la página con el cuadrito gris de la esquina.