Menu hiérarchique à 3 niveaux

Bonjour à tous,
Je cherche des conseils et des critiques constructives sur ce menu hiérarchique en HTML/CSS :
Le code HTML :

<div id="enTete">
		<div id="menu">
			<ul>
			  <li><a href="#">Nord</a></li>
			  <li><a href="#">Ouest</a>
			    <ul>
			      <li><a href="#">Rennes</a></li>
			      <li>
			      	<a href="#">Nantes</a>
			      	<ul>
			      	  <li><a href="#">Saint-Herblain</a></li>
			      	  <li><a href="#">Rezé</a></li>
			      	  <li><a href="#">Basse Goulaine</a></li>
			      	</ul>
			      </li>
			      <li><a href="#">Saint-Nazaire</a></li>
			    </ul>
			  </li>
			  <li><a href="#">Sud</a></li>
			</ul>
		</div>
	</div>

Le code CSS :

			/* Le fond du menu */
				#enTete {
				border-top: 1px solid #333;
				border-bottom: 1px solid #333;
				background-color: lightgreen;
			}
			/* La boîte du menu  */
			#menu {
				width: 960px;
				margin: 0 auto;
			}*
			/* Pour centrer le premier <ul> */
			#menu ul:first-child {
				text-align: center;
			}
			/* Les <ul> enfants */
			#menu ul {
				margin:0;
				padding:0;
				list-style-type:none;
			}
			/* Les items du premier <ul> */
			#menu li {
				display: inline-block;
				position: relative;
				width:150px;
				height: 30px;
				line-height: 30px;
				text-align: left;
			}
			/* Les liens des items du premier <ul> */
			#menu li a {
				text-decoration:none;
				padding: 0 0 0 5px;
			}
			/* Le survol des liens des items du premier <ul> */
			#menu li:hover {
				background-color: lightyellow;
			}
			/* Masquer les <ul> de 2e niveau */
			#menu li ul {
				display:none;
				position: absolute;
				margin: 0;
				padding: 0;
			}
			/* Afficher les <ul> de 2e niveau au survol des <li> de premier niveau */
			#menu li:hover ul {
				display:block;
				background-color: lightblue;
			}
			/* Masquer les <ul> de 3e niveau */
			#menu li:hover ul ul {
				display:none;
				position: absolute;
				margin: 0;
				padding: 0;
			}
			/* Afficher les <ul> de 3e niveau au survol des <li> de 2e niveau */
			#menu li:hover ul li:hover  ul {
				display:block;
				background-color: lightblue;
			}
			/* La liste de 3e niveau */
			#menu li ul ul {
				top: 0;
				left: 100%;
			}

Y'a-t-il de grossières erreurs digne d'un GrosQuick ?
Merci pour votre aide !
Modifié par GrosQuick (23 Mar 2013 - 18:50)