Buona sera,
sto avendo un problema con una lista per creare un menù

Codice PHP:
#header_menu {
    background: #333;
    margin:0 0 0 auto;
    width:500px;
    height:23px;
}


#header_menu li {
    float: left;
    list-style:none;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 10px;
    padding-right: 10px;
    background:#333;
    font:Verdana, Geneva, sans-serif;
    color:#CCC;
    border-bottom: 2px solid #009;
}

#header_menu li a:link {
    background:#333;
    font:Verdana, Geneva, sans-serif;
    color:#CCC;
    border-bottom-color:#03C;
}

#header_menu li a:visited {
    background:#333;
    font:Verdana, Geneva, sans-serif;
    color:#CCC;
    border-bottom-color:#03C;
}

#header_menu li a:hover {
    background:#333;
    font:Verdana, Geneva, sans-serif;
    border-bottom: #03F 2px solid;
    color: #FFF;
} 
Questo css, applicato a
Codice PHP:
<div id="header_menu">
        <ul>[*]home
            [*][url=""]trick[/url][*][url=""]clip[/url][*][url=""]freestyle[/url][*][url=""]contatti[/url][/list]
      <span>ciao</span>
    </div> 
si comporta in modo bizzarro.. nel senso, non viene ricolorato il bordo, ma visto i padding, vengono ignorati e posti subito dopo la barra del sottolineato del link, lasciando inalterato il bordo del li di riferimento... ottengo qualcosa con un display:block nell'hover.
In questo caso il bordo di 2px viene messo all'altezza corretta che verifico con l'item della home che non ha link. Ma il bordo precedente non sparisce, ma si abbassa di un paio di px per far spazio al nuovo bordo e così me ne mostra due VVoVe: in più il bordo del nuovo colore è della larghezza del testo e non ti tutto l'item come invece è per default.. perchè a sto giro il css si comporta in questo modo?!?!

suggerimenti?!

grazie mille
ciao