background-image per un menù, ma come?

[manuelaxx]

Ciao,

volevo sapere come fare per indicare al foglio di stile di inserire icone diverse per le voci della lista di un menù.

Al momento ho scritto:

#menu li a {
position:absolute;
top:20px;
text-indent:-999em;
background:url(icon01.png) no-repeat 0 0; //SUPPONGO SIA LA PARTE DA MODIFICARE?
display:block;
width:109px;
height:inherit;

In pratica vorrei sapere, per ogni voce del menù:

<ul id="menu">
<li id=l1>Item 1
<li id=l2>Item 2
<li id=l3>Item 3
<li id=l4>Item 4
<li id=l5>Item 5[/list]

come dovrei scrivere per far corrispondere ad ogni voce un'immagine diversa!
Grazieeee

[JVM]

ciao, nel codice che hai proposto utilizzi gli id , in questo modo credo che l'unica soluzione sia creare una voce per ogni elemento del menu , ognuna con un'immagine diversa

li#voce1 {
position:absolute;
top:20px;
text-indent:-999em;
background:url("immagine_prima_voce");
display:block;
width:109px;
height:inherit;}

li#voce2 {
position:absolute;
top:20px;
text-indent:-999em;
background:url("immagine_seconda_voce");
display:block;
width:109px;
height:inherit;}

e poi scrivere nel codice html questo

<ul id="menu">
<li id="voce1">Item 1
<li id="voce2">Item 2
...lo stesso per le altre voci[/list]

[manuelaxx]

così mi esce come se fossero sovrapposte le varie voci, cioè una sull'altra! dovrei dare posizioni diverse per ogni link