problemi effetti del menu

[lucaeffe]

le voci del menu dovrebbero stare in linea tra loro.
se nn passo il mouse tutto ok,appena il mouse fa contatto si dispongono come nella foto!!

regola CSS:

#menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bolder;
margin-left:270px;
margin-top:70px;
letter-spacing:2px;
word-spacing:50px;

}

#menu ul a, #menu ul a:visited{
color:#000;
text-decoration:none;
text-align:center;
}

#menu ul a:hover{
color:#FFF;
background:url(image/hover1.jpg) no-repeat;
display:block;
height:27px;
width:150px;
background-position:center;
padding:0 10px 0 0;

}

#menu li{
display:inline;
}

[seed_squall_it]

Ci sono errori concettuali nel CSS. All'elemento <a> non applichi nessuna dimensione, mentre lo fai solo per il suo stato hover. Dovrebbe essere fatto così:

#menu ul a, #menu ul a:visited{
color:#000;
text-decoration:none;
text-align:center;
display:block;
height:27px;
width:150px;
background-position: center; /* Qui c'è un altro errore! background-position si aspetta DUE valori, mentre tu ne hai impostato solo uno. Oltretutto, visto che prima specifichi background, puoi inserire direttamente in quella proprietà i valori per background-position*/
padding:0 10px 0 0;
}

/* Questa regola eredita le proprietà non specificate dalla precedente, poiché si riferisce ad una pseudoclasse del selettore generico a */

#menu ul a:hover{
color:#FFF;
background:url(image/hover1.jpg) no-repeat;
}

Inoltre, nella regola degli elementi[*] manca:

list-style: none;

altrimenti nei browser aderenti agli standard ti appare sempre il punto elenco.

In ogni caso, se puoi, eviterei di usare display: inline per gli elementi di lista quando hai i link al loro interno dichiarati come elementi block-level. In questi casi sarebbe meglio (sempre se possibile a causa del layout), flottare a sinistra sia i[*] che gli <a>. Chiaramente, se lo fai, devi aggiungere un elemento vuoto, come un <div> subito dopo il tag[/list]. A questo elemento devi assegnare una classe che si riferisca ad una regola CSS che fa il clear (se hai flottato i[*] a sinistra, dovrai effettuare un clear: left) per ripristinare il normale flusso del documento. Se non lo fai, gli elementi flottanti sono considerati estratti dal flusso e quindi non influenzeranno la posizione di tutti i box ad essi adiacenti.