Kuni Siri

Problema:
Um menu horizontal feito com listas, preciso alinhar os itens do menu no centro da div #menu como se todos os itens fossem um bloco só. Não posso definir width para ul ou li pois os tamanhos dos itens serão variáveis e não tenho como prever de antemão.

[codebox] <div id="menu">
<ul>
<li><a href="#">Tab One</a></li>
<li><a href="#">Tab Two: Longer</a></li>
<li><a href="#">Tab Three: Longest</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
</div>[/codebox]
[codebox]#menu {
float:left;
width:574px;
}
#menu ul {
display:block;
list-style:none;
}
#menu ul li {
display:inline;
border:#000 solid;
border-width:0 1px;
padding:0 0.5em;
}
[/codebox]

Estou tendo problemas com uma classe que estou aplicando e as definições dela estão sendo ignoradas tanto pelo ff quanto pelo ie. a Classe sub deve ser aplicada aos sub itens do menu. Seguem os respectivos códigos.

[codebox]<div id="menu">
<ul>
<li><a href="#">Menu 1.0</a></li>
<li class="sub"><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 2.0</a></li>
<li class="sub"><a href="#">Menu 2.1</a></li>
</ul>
</div>[/codebox]
[codebox]#menu {
width:100%;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family:'Trebuchet MS', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #adf;
color: #333;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#menu li {
border-bottom: 1px solid #adf;
margin:0;
}

#menu li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #15497B;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #menu li a {
width: auto;
}
#menu li a:hover, #menu li a:focus {
border-left: 10px solid #185595;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
.sub a {
text-indent:14px;
border-left: 10px solid #185595;
border-right: 10px solid #5ba3e0;
}[/codebox]