Ciao a tutti. Sto avendo problemi con un elenco puntanto da mostrare in orizzontale, cambiando il puntino con una immagine.
Allego la foto di come deve essere il risultato finale del menu
MENU.jpg

E questo è il codice css:
codice:
#nav-menu {    
width: 800px;
    float: center;
    background: #000;
    min-height: 40px;
}

ul {
    list-style-image: url(images/li.png);
}

li {
  margin-right: 20px;
  margin-left: 20px;
  color: #fff;
}
Il problema di questo codice è che se non metto il codice display: inline, allora vedo la spiga come elenco puntato, ma l'elenco rimane in verticale. Appena aggiungo il codice Display:inline al tag li, il menu si sviluppa in orizzontale, ma perdo le spighe che fanno da elenco puntato.
Inoltre questo menu vorrei centrarlo nella pagina. Ho inserito il wrapper di 980 px al menu ho dato una dimensioni di 800px, ho inserito il float:center ma il menu rimane appoggiato a sx.

Ci sto perdendo la testa. Qualcuno mi aiuta a capire?

Allego di seguito anche il codice html:
<body>

<header>
<div id="topheader">
CAMPO CERCA
</div>
<div id="wrapper">
<div id="logo"><img src="images/logo.png" />
</div>

<div id="nav-menu">
<nav>
<ul>
<li class="nav-1"> HOME </li>
<li class="nav"> VOCE MENU </li>
<li class="nav"> VOCE MENU </li>
<li class="nav"> VOCE MENU </li>
<li class="nav"> VOCE MENU </li>
</ul>
</nav>
</div>
</div>
</header>


</body>