xhtml关于横向菜单页面居中的问题

<style>
<!--
body{
 font-family: Verdana;
 font-size: 11px;
 text-align:center;
}
.menu{
 width:404px;
 clear:left;
 list-style:none;
}

.menu li{
 float:left;
 display:inline;
}

.menu a:link,
.menu a:visited{
 padding:2px;
 line-height:20px;
 margin:5px 1px 0 0;
 display:block;
 color:#999;
 background:#fff;
 border:1px solid #ccc;
 text-decoration:none;
 width:100px;
}

.menu a:hover{
 color:#fff;
 background:#ccc;
 width:100px;
}
-->
</style>

<ul class="menu">
<li><a href="#">aaa</a>
<li><a href="#">bbb</a>
<li><a href="#">ccc</a>
<li><a href="#">ddd</a>
</ul>