[Résolu] Sortir un sous menu d'un autre

Bonjour,
Je suis entrain de réaliser un menu horizontal,et je me retrouve incapable de faire sortir un sous menu par un avant sous menu.
J'aimerais le réaliser sans javascript ci possible.
Voici mon bout de code HTML:

<ul id="menu">
				<li><a href="home.html">Accueil</a>
				</li>
				<li id="firstli"><a href="">Services</a>
					<ul>
						<li id="secondli"><a href="">Développement</a>
							<ul id="thirdul">
								<li><a href="">Site Web</a></li>
								<li><a href="">Site Mobile</a></li>
							</ul>
						</li>
						<li><a href="">Télécommunication</a></li>
						<li><a href="">Maintenance</a></li>
						<li><a href="">Conseil et formation</a></li>					
					</ul>
				</li>
				<li><a href="">Gallerie</a>
				</li>
				<li><a href="about.html">Qui sommes nous</a>
				</li>
				<li><a href="contact.html">Contacte</a>
				</li>
			</ul>

et voici mon bout de code CSS:

#menu a{
	 text-align:center;
	font-style:italic;
	color: #666;
	text-decoration: none; 
  	display:block;
}
#menu li{
	position:relative;
	display:inline-block;
	width:150px;
	margin:-2px;
	padding:9px 10px;
	background-color:#F2F2F2;
}
#menu li li{
	position:relative;
	display:inline-block;
	width:166px;
	margin:-2px;
	padding:9px 3px;
	background-color:#F2F2F2;
}
#menu  li:hover{
	background-color:#F2F2F2;
}
#menu  li a:hover{
 	border-radius:8px 8px 10px 10px;
}
#menu  li li:hover{
	
	background-color: #e8491d;
	width:165px;
 	display:block;
}
#menu ul{
	position:absolute;
	top:36px ; left:1.1px;
	max-height:0;
	margin:0;
	padding:0;
    overflow:hidden;
	transition:0s max-height 0.2s ;
    width:200px;
}
#menu li:hover ul{
	max-height:220px;
	max-width:500px;
}
#menu a:hover {
	background:  #e8491d;
	color: gold;
	padding-left: 30px;  
}
#menu {
	position:absolute;
	right:-13em;
	top: 9%;
	width: 70.5em;
} 

Merci d'avance pour tous vos efforts .

Merci infiniment pour ton aide , ça marche.
Je vais essayer de refaire le code étape par étape .