Menu CSS reparti sur une largeur

Bonjour je m'entraine avec le css, et c'est pas evident. En fait je voudrais faire un menu comme suite :
3 volets reparti sur la largeur et sous un sous menu encadré
http://img102.xooimage.com/files/b/9/0/volet-45804cb.jpg
Mon code
Html

	<div id="navigation">
		<ul>
			<li><a href="#">Volet I </a></li>
			<li><a href="#">Volet II</a></li>
			<li><a href="#">Volet III</a></li>
		</ul>
	</div>

CSS

#navigation ul
{
	margin: 0;
	padding: 0;
	
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
	position:relative;
        float:center;
	
}
#navigation li a
{
	display: block;
	float: center;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
}
#navigation li a:hover { color: #ffd300; }

Resultat
http://img101.xooimage.com/files/e/6/c/image-2-4580510.png
Modifié par accursed (07 May 2014 - 14:10)