[Résolu] Menu déroulant: problème tout bête

Bonjour
Tout bête, oui, mais je suis un peu newbie et ça fait 2 heures que je pédale dans la semoule avec ce problème.
Je voudrais faire fonctionner ceci:

<div id="menu">
<ul>
       <li><a href="#">Item 3</a></li>
  	<li ><a href="#">Contact</a>
		<ul>
			<li><a href="#">Sous-menu a</a></li>
			<li><a href="#">Sous-menu b</a>
				<ul>
					<li><a href="#">Sous-menu b a</a></li>
					<li><a href="#">Sous-menu b b</a></li>
				</ul>
			</li>
			<li><a href="#">Sous-menu c</a></li>
		</ul>
	</li>
</ul>
</div>

L'ennui, c'est qu'au survol de "Contact", la liste déroulante qui apparait affiche aussi "Sous-menu ba" et "Sous-menu bb" directement dans la liste sans avoir besoin de survoler "Sous menu b" pour cela.

Voici le css qui s'y rapporte:

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;  
 }
 
 #menu ul li ul {
 display:none;
 }

 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li { 
 float:none;
 }
 
 #menu  li ul li:hover > ul  
{display:block; 
float:none;
margin-left:125px;
} 
 
 #menu li ul {
 position:absolute;
 }

Une âme charitable a-t-elle une idée pour me dépanner? Ce serait super sympa. Merci d'avance, et bonne soirée.
Modifié par phrq (14 Feb 2020 - 09:30)

Bonjour,
Il faut que tu ajoutes un chevron ligne 28 de ton CSS qui doit être
#menu ul li:hover>ul {
et non
#menu ul li:hover ul {
comme actuellement puisque l'espace après :hover fait que cela agit sur tous les niveaux d'ul suivant donc sur tes sous-menus et sous-sous-menus.