Menu en image Roll-hover. css et html

Bonjour je me suis basé sur un tutoriel du livre de Raphaël Goetter(css 2 Pratique du design web).
Mon menu fonctionne bien seulement je voudrais faire afficher les liens horizontalement.
Est-ce que quelq'un d'entre vous a trouvé mon erreur?

http://binarysim.lescigales.org/nav/
http://binarysim.lescigales.org/TechIt/

<ul id="tab-nav">
    <li><a href="#" title="Accueil" accesskey="1">Accueil</a></li>
    <li><a href="#" title="À propos" accesskey="2">À propos</a></li>
    <li><a class="current" href="#" title="WebLog" accesskey="3">WebLog</a></li>
    <li><a href="#" title="Contact" accesskey="4">Contact</a></li>
</ul>

ul#tab-nav {
margin:0;
padding:0;
text-align:center;
height:44px;
width:157px;
}

ul#tab-nav li{
display:inline;
float:left;
height:44px;
list-style:none;
}

ul#tab-nav  li a{
display:block;
line-height:44px;
color:#efefef;
font-family:georgia;
font-size:16px;
font-weight:bold;
text-decoration:none;
height:44px;
width:157px;
background:transparent url(img/menuv.png) no-repeat 0 0;

}
ul#tab-nav  li a:hover{
background:transparent url(img/menuv.png);
background-position:0% -44px;
}

ul#tab-nav li a.current{
background:transparent url(img/menuv.png);
background-position:0% -88px;
}
ul#tab-nav li a.current:hover{
background:transparent url(img/menuv.png);
background-position:0% -44px;
}

/*Merci de votre aide*/