Menu por lista en CSS, como posicionarlo horizontalmente

[batallas]

Hola, estoy haciendo un menu bastante simple pero necesito que quede tal que

-- XXXXXX --- XXXXXX - XXXXX ----

Estoy mirando un metodo en un blog pero aunque el menu funciona, no se queda horizontal. Les dejo el codigo.

Saludos

Código:

#navi {  
	list-style:none;
	margin:0;
	padding:0;
	float: left;
}


#navi li {
	margin:2px;
	padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
	float:left;
}

#navi li a {
	display:block;
	width:100px;
	padding:4px 0;
	text-decoration:none;
	text-align:center;
	font-size:11px;
	color:#FFFFFF;
	background-color:#000000;
	border-left:10px solid #666666; 
	float: left;
}

#navi li a:hover {
	color:#99CC00;
	background-color:#003366;
	border-left-color:#99CC00;
	float: left;
}