Problema con menú css sprites

[kahlo84]

Ok, este es el código css:

Código:

.navi1 {
  display: block;
  height: 82px;
  margin:0 auto;
  position: relative;
  width: 900px;
}
.navi1 ul {
  float: none;
 
}
.navi1 ul li {
  height: 82px;
  background-image: url(http://i1188.photobucket.com/albums/z415/jcarlosc84/menu-3.jpg);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;

  position: absolute;
}

.navi1 ul li.home { background-position: 0px 0px; left: 0px; width: 90px; }
.navi1 ul li.looks { background-position: -90x 0px; left: 90px; width: 90px; }
.navi1 ul li.belleza { background-position: -180px 0px; left: 180px; width: 90px; }
.navi1 ul li.viajes { background-position: -270px 0px; left: 270px; width: 90px; }
.navi1 ul li.shopping { background-position: -360px 0px; left: 360px; width: 90px; }
.navi1 ul li.lector { background-position: -450px 0px; left: 450px; width: 90px; }
.navi1 ul li.featuring { background-position: -540px 0px; left: 540px; width: 90px; }
.navi1 ul li.premios { background-position: -630px 0px; left: 630px; width: 90px; }
.navi1 ul li.varios { background-position: -720px 0px; left: 720px; width: 90px; }
.navi1 ul li.roypedrin { background-position: -810px 0px; left: 810px; width: 90px; }
.navi1 ul li.contacto { background-position: -900px 0px; left:900px; width:90px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.home:hover { background-position: 0px -82px; }
.navi1 ul li.looks:hover { background-position: -90px -82px; }
.navi1 ul li.belleza:hover { background-position: -180px -82px; }
.navi1 ul li.viajes:hover { background-position: -270px -82px; }
.navi1 ul li.shopping:hover { background-position: -360px -82px; }
.navi1 ul li.lector:hover { background-position: -450px -82px; }
.navi1 ul li.featuring:hover { background-position: -540px -82px; }
.navi1 ul li.premios:hover { background-position: -630px -82px; }
.navi1 ul li.varios:hover { background-position: -720px -82px; }
.navi1 ul li.roypedrin:hover { background-position: -810px -82px;}
.navi1 ul li.contacto:hover { background-position: -900px -82px;  }

Y este el del menú:

Código:

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

Muchas gracias.