Il codice HTML va quasi bene (non e` semanticamente corretto id="center" e c'e` un blocco inutile). Il CSS invece e` tutto da rivedere.
HTML
Anzitutto per centrare. Immagino devi centrare il blocco "menu" all'interno della sua area.
Per centrare un oggetto in uno esterno, questo deve avere una dimensione.
Supponendo che "areamenu" stia direttamente nel body definisco width: 100% in tutti i blocchi che lo contengono.
I li devono essere affiancati tramite il float. Se li rendi inline, non puoi definirne le dimensioni
I link devono occupare tutto lo spazio del li. Quindi devono essere di tipo blocco ed avere dimensioni 100%.
Ecco una bozza: mancano tutte le tue personalizzazioni.
codice:
html, body {
width: 100%;
}
#areamenu {
width: 100%;
text-align: center; /* serve solo per IE */
}
#menu {
margin 0 auto; /* per centrare */
padding: 0; /* pulisce i padding di default */
list-style-type: none; /* toglie il punto-elenco */
}
#menu li {
margin: 0; /* pulisce i margini di default */
padding: 0; /* pulisce i padding di default */
border: 1px solid;
border-color: #ccc #888 #555 #bbb;
list-style-type: none; /* toglie il punto-elenco */
float: left; /* affianca i vari blocchi */
width: 15em; /* da sistemare a piacere */
}
#menu a {
display: block; /* per potergli dare le dimensioni */
width: 100%; /* deve occupare tutto lo spazio del li */
height: 100%;
backgorund: ...;
color: ...;
font ...;
}