Jak "udělat" menu?

Dobrý den, vytvořil jsem menu, jehož položky jsou odděleny horizontální linkou, která je vložena jako obrázek na pozadí každé položce li, jenže potřebuji aby za poslední položkou už nebyla, jak to udělat? děkuji za odpověď..

#menu2 li {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:14px;

font-weight:bolder;

color:#000000;

background-image: url(img/delitecko.gif);

text-align: center;

background-repeat:no-repeat;

background-position: 50% 100%;

margin:  auto;

padding-bottom: 15px;

padding-top: 10px;

}

#posledni {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #000000;
text-align: center;
margin: auto;
padding-bottom: 15px;
padding-top: 15px;}

<ul id="menu2">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li id="posledni">...</li>
</ul>

jenže takto to nereaguje, linka se i za poslením ukáže (nejspíš z důvodu dědičnosti?), zkusil jsem tedy takovou "prasečinku" a do html kódu jsem místo posledního li dal div, v opeře a firefoxu paráda, ale IE 7 se zlobí a celé to rozhodí, má někdo tedy nějaký nápad? děkuji za každou radu, J.

tiso

Děkuji Vám, dovolím si položit ještě jeden dotaz...

chtěl bych, aby hover položek li byla grafická odrážka umístěná vždy kousek od každého slova (položky li) menu.

Mám nyní dva problémy, musím pro každou položku tedy nadefinovat jiné id když požaduji odrážku vždy na trochu jiném místě?
Za druhé, odrážka se mi ani nezobrazí. :-(

Děkuji za každou reakci, kód opět přikládám

#menu2 li {

display: block;

list-style-type:none;

background-image: url(img/delitecko.gif);

text-align: center;

background-repeat:no-repeat;

background-position: bottom;

margin:  auto;

padding-bottom: 15px;

padding-top: 10px;

}



#menu2 li a {

	text-align: center;

	font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:13px;

    font-weight: bolder;

    color:#000000;

}



#menu2 li#posledni{

background: transparent none;

}



#menu li a:hover,#menu li a.aktivni {

background-image: url(img/odrazka.gif);

background-repeat:no-repeat;

background-position: left;

margin: auto;

}

<ul id="menu2">
<li><a href="#" class="aktivni">Úvod</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Co nabízíme</a></li>
<li><a href="#">Reference</a></li>
<li><a href="#">Ceník</a></li>
<li id="posledni"><a href="#">Kontakt</a></li>
</ul>

je možné, že někde dělám fatální chybu, uvítám každou radu na zlepšení, J.

omlouvám se, chyba byla ve špatném označení, odrážka se mi již objevila, problémem posledním je, jak ji napozicovat?

mám ji umístěnou vlevo prvku li, avšak tak se částečně překrývá i s textem prvku li. Potřeboval bych ji umístit vně toho prvku, případně ji nějak odstrčit jeětš více doleva, ale jak ji odstrčím mimo prvek li, tak zmizí i v případě overflow:visible

jak to tedy vyřešit, opět děkuji za jakýkoli nápad, J.

vyřešeno, omlouvám se za spamování a ještě jednou děkuji tisovi