menu horizontal centrado y en bloques

[erick_arcini]

Hola, espero no causar problemas con esto que necesito, resulta que tengo el siguiente menú

Código:

		<div class="menu">
			<ul>
				<li class="sub">Inicio</li>
				<li class="sub">Servicios</li>
				<li class="sub">Aprender</li>
				<li class="sub">Contáctanos</li>
			</ul>

		</div>

y el siguiente css

Código:

.menu
{
	text-align:center;
	border:solid 1px #7c0000;
}
ul
{
	list-style:none;
}
ul li
{
	display:inline;	
}
.sub
{
	border:solid 1px #FFF;
	width:200px;
}

El problema esta en que cada uno de los "<li>" me los coloca del tamaño con el borde de las letras y no de 200px como se lo indico en la clase ".sub", la pregunta es:

¿como le puedo hacer para que el menú me quede centrado y cada uno de los "<li>" se me despliegue a una medida de 200px cuando utilizamos "display:inline"?

[Roly]

Algo asi:
.menu
{
text-align:center;
border:solid 1px #7c0000;
}

.sub
{
border:solid 1px #FFF;
width:200px;
display:block;
float:left;
}

<ul>
<li class="sub">Inicio</li>
<li class="sub">Servicios</li>
<li class="sub">Aprender</li>
<li class="sub">Contáctanos</li>
</ul>

[erick_arcini]

Hola, gracias por contestar, así es, así ya lo había manejado, pero el problema que al colocar el float:left, el menú no me queda centrado en mi contenedor.

Lo que decidí por el momento usar el menú lateral en lo que arreglo la situación.