problema menu orizzontale su chrome

[foxissimo]

Ciao a tutti.

Ho un semplice menu orizzontale in html e css:

<div id="voci-menu">
    	<ul>
            	<li class="storia">
                <li class="soci">
                <li class="attivita">
	        <li class="etica">
                <li class="convenzioni">           [/list]
</div>

div#voci-menu ul a {
 margin:0;
 padding:0;
}
	
div#voci-menu ul a li {
 list-style:none;
 display:inline-block;
 width:128px;
 height:70px;
 font-variant:small-caps;
 color:white;
 font-weight:bold;
 font-size:17px;
 border-radius: 8px;
 -moz-border-radius: 8px; /* firefox */
 -webkit-border-radius: 8px; /* safari, chrome */	
}

So già che mi direte che il codice non è corretto, perchè i link nel menu dovrebbero trovarsi all'interno del tag[*] e non racchiuderlo come invece ho fatto.

Ma il mio problema è un altro. Se aprite questa pagina con Chrome
http://www.skillyourself.it/altro/panathlon/index.php
noterete che il menu spesso rimane verticale. Poi basta ricaricare la pagina o cliccare su un link del menu per vedere che magicamente il menu torna orizzontale. Tutto questo in modo del tutto casuale.

com'è possibile questo? il codice è sempre lo stesso... come fa Chrome ad interpretarlo qualche volta in un modo e qualche volta in un altro?

[Sky]

Ho l'impressione che dipenda dai tag[*] nidificati dentro ai tag <a>
Il tag <a> è di tipo inline, non mi stupirebbe se ci fossero problemi di resa incomprensibili inserendo al suo interno un elemento di blocco.

[foxissimo]

su questo siamo d'accordissimo... è sicuramente un errore.

La cosa che mi lascia perplesso è che ad ogni aggiornamento di pagina l'interpretazione del browser cambia... e il codice è sempre lo stesso....