Come faccio ad accentrare il menù orizzontale, questo è spostato a sinistra, io lo vorreic entrale, qualcuno può darmi una mano, cioè in pratica bisogna accentrare le voci.

codice:
<html>
<head>
<title>Esempio 3 aree con CSS e DIV</title>
<style>
body { font-family: sans-serif; font-size: 11px; margin: 2px; padding: 0px; height: 100%;}
.main { height: 100%; }
.top { height: 25%; border-bottom: 1px solid #555; padding: 4px; }
.menu {height: 5%; border-bottom: 1px solid #555; line-height: 14px; background-color: #00A86B }
.content { letter-spacing: 2px; line-height: 16px; text-align: justify; padding: 4px;}

body { font-family: sans-serif; font-size: 11px; margin: 2px; padding: 0px; height: 100%;}
.main { height: 100%; }
.top { height: 130px; padding: 4px; }
.menu {height: 25px; border-bottom: 1px solid #555; border-top: 2px hidden #555; background-color: #00A86B }
.content { letter-spacing: 2px; line-height: 16px; text-align: justify; padding: 4px;}

ul#menu {
font-family: Trebuchet MS, Verdana, sans-serif;
font-size: 15px;
margin:0;
padding: 0;
list-style: none;
}

ul#menu li {
background-color: #00A86B;
display: block;
width: 150px;
padding:0;
margin:0;
float: left; /* elementi su singola riga */
}

ul#menu li a {
color: #fff;
display: block;
font-weight: bold;
text-decoration: none;
width: 150px;
height:18px;
padding:4px 0;
text-align: center;

}

ul#menu li.active, ul#menu li:hover {
background-color: #77dd77;
}

</style>
</head>
<body>
<div class="main">
<div class="top"><h3>Titolo</h3></div>
<div class="menu">
<ul id="menu">[*]Home page[*]Chi siamo[*]Premi[*]Regolamento[*]Contatti[/list]

</div>
<div class="content">



</div>
</div>
</body>
</html>