Menu Horizontale avec 2 sous niveau

[Rhend]

Bonjour à tous,

Je suis actuellement en train d'essayer de faire un menu horizontale avec deux sous niveau. J'ai regarder dans la galerie CSS et l'exemple le plus concret étant celui-là :

http://css.developpez.com/galerie/de...talderoulant1/

Cependant je ne comprend pas trop les astuces utilisées pour réaliser ce menu J'y suis donc aller de mes petites mimines pour effectuer un menu comme je l'entends et j'arrive presque au résultat voulu il me manque cependant 2 choses :

Le rendre plus "carré"
Une bonne gestion du deuxième sous-niveau du menu.

Voila donc mon bout de code HTML5 :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<nav>
	<ul>
		<li><a href="#">Menu 1</a>
				<ul>
					<li><a href="#">Menu 1.1 </a></li>
					<li><a href="#">Menu 1.1 </a></li>
					<li><a href="#">Menu 1.2  :</a>
						<ul>
							<li><a href="#">Menu 1.2.1 </a></li>
							<li><a href="#">Menu 1.2.2</a></li>
					</ul>
					</li>
					<li><a href="#">&nbsp;</a></li>
				</ul>
		</li>
		<li><a href="#">Menu 2</a>
			<ul>
				<li><a href="#">Menu 2.1</a>
					<ul>
						<li><a href="#">Menu 2.1.1</a></li>
						<li><a href="#">Menu 2.1.2</a></li>
						<li><a href="#">Menu 2.1.3</a></li>
					</ul>
				</li>
				<li><a href="#">Menu 2.2 :</a>
					<ul>
						<li><a href="#">Menu 2.2.1</a></li>
						<li><a href="#">Menu 2.2.2</a></li>
					</ul>
				</li>
				<li><a href="#">Menu 2.3</a></li>
			</ul>
		</li>
	</ul>
</nav>

Et voici le morceau de code CSS3 (enfin du moins j'essaye de faire du CSS3 )

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav{
	text-align:center;	
	position:relative;
}
nav li{
	display:inline-block;
	background-color:white;
	border:2px solid black;
}
nav ul li  ul {
	margin-left:-42px;
}
nav ul li ul li ul {
	margin-left:131px;
}
nav ul li{
	width:170px;
	margin-right:235px;
}
 
nav a{
	text-decoration:none;
	color: black;
}

Donc actuellement je suis à 80% du résultat final que je souhaite obtenir. C'est à dire que :

J'aimerai que Menu 2.1 2.2 & 2.3 soit coller les uns en dessous des autres
J'aimerai que mes "colonnes" soit plus carré qu'actuellement.

Je vous remercie par avance de votre aide !

Ps : Les couleurs sont horrible je vous l'accorde mais au moins je m'y retrouve

[Edit pour Bovino] Je pensais que ca en était autant pour moi

[Rhend]

J'ai également un deuxième problème avec mon CSS :

J'aimerai réussir sans l'aide du javascript (comme le fait l'exemple que j'ai mis dans mon premier poste) à naviguer dans mon menu facilement avec l'aide du hover. Cependant mon hover fonctionne avec les deux colonnes d'un coup donc ce n'est pas pratique du temps. J'ai dans l'idée d'englober chacune de mes colonnes de <div> afin de pouvoir les gérer facilement mais il doit bien y avoir une façon plus "propre" de faire non ? Mais je ne trouve pas.

Dernière chose, comment puis-je "comprimé" mon premier sous-menu ? Et ne plus avoir ces grands espaces vide sans que cela détruise ma mise en forme ?

Merci !