Mise en page d'un menu

Bonjour,
j'ai un soucis avec la mise en page d'un menu.
Je n'arrive pas à positionner les textes du menu sans la marge de gauche. J'aimerais avoir un effet de "rollover" lors du passage de la souris sur les liens, une puce devrait alors apparaître, mais cette marge est un obstacle à la mise en page.

voici le resultat souhaité


voici le resultat obtenu


voici le code html

<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

et le code de la css

#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#navlist li
{list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navlist li a 
{
text-decortion: none; 
padding-left: 8px;
}
#navlist li a:hover 
{
text-decoration: none;
background-image:url(puce.png);
background-position: 0px center;
background-repeat: no-repeat;
padding-left: 8px;
}

Modifié le 06 Jan 2005 - 14:12

Essaie de placer le padding-left sur ton <li>

#navlist li { 
   padding: 0.25em; 
   padding-left: 8px; 
}

Tu peux utiliser les propriétés raccourcies :

#navlist li a:hover { 
   text-decoration: none; 
   background: url(puce.png) 0px center no-repeat; 
   padding-left: 8px; 
}

Pour les bordures, peut-être les appliquer à <a> avec un margin-left...

(je n'ai pas le temps de tester, mais tu nous dis ce que ça donne) !
Modifié le 06 Jan 2005 - 15:00

je n'ai toujours pas trouvé la solution, peut-être avec cette solution ?
http://www.alistapart.com/articles/sprites/

à tester !