Image de sous-menu aux echelons inférieurs

Mon petit problème se situe dans les images des sous-menu 2 et 3.
J'ai un pb de synthaxe, sans doute ; J'arrive à mettre une image dans le sous-menu 2 au premier echelon mais la meme image se retrouve aussi à l'echelon 2 et 3.

Je vous mets l'intégratité du code css de mon sous-menu meme si le souci se situe uniquement dans le sous-menu 2 et 3.

/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b1_nv.jpg);
margin-top:-3px;
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b2_nv.jpg);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b3_nv.jpg);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b4_nv.jpg);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b5_nv.jpg);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b6_nv.jpg);
}
 
 /*background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b1a_nv.jpg);
}
#menu2 li:nth-child(2):hover{
background:url(../images/visiteurs/b2a_nv.jpg);
}
#menu2 li:nth-child(2) li{
background:url(../images/visiteurs/b21_nv.jpg);
}
#menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b21a_nv.jpg); 
}
#menu2 li:nth-child(3):hover{
background:url(../images/visiteurs/b3a_nv.jpg);
}
#menu2 li:nth-child(3) li{
background:url(../images/visiteurs/b31_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b31a_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(4):hover{
background:url(../images/visiteurs/b4a_nv.jpg);
}
#menu2 li:nth-child(5):hover{
background:url(../images/visiteurs/b5a_nv.jpg);
}
#menu2 li:last-child:hover, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b6a_nv.jpg);
}

Voici le code html :

<ul id="menu2">
	<li><a href="#">&nbsp </a>	</li>
<li><a href="#">&nbsp </a> <!-- METTRE ESPACE --> 
		<ul>
			<li><a href="page2.html">&nbsp </a></li> <!--Qui sommes nous ?--> 
		 	<li><a href="page3.html">&nbsp </a></li> <!--iD membre <font color="#f39300">N</font>--> 
			<li><a href="page4.html">&nbsp </a></li> <!-- Notre réseau -->
		</ul>
	</li>
<li><a href="#">&nbsp </a>
		<ul>
			<li><a href="page5.html">&nbsp </a></li><!--Nos plateformes--> 
			<li><a href="page6.html">&nbsp </a></li><!--Nos partenaires--> 
		</ul>
	</li>
  <li><a href="page7.html">&nbsp </a>	</li>
    
  <li><a href="page8.html">&nbsp;</a>    </li>
    
  <li><a href="page9.html">&nbsp </a>	</li>
    
</ul>

J'espère que vous pourrez m'aider.

Bonsoir.

« J'ai un pb de syntaxe, sans doute ; J'arrive à mettre une image dans le sous-menu 2 au premier échelon mais la même image se retrouve aussi à l'échelon 2 et 3. »
Oui, vous avez un pb de syntaxe.

#menu2 li:first-child

ne veut pas dire le 'li' aîné de #menu2 mais le 'li' aîné de tous les descendants de #menu2.

Pour avoir l'aîné de #menu2, il faut faire :

#menu2 > li:first-child