Menu navigation déroulant (menu avec image/sous menu sans image)

Bonjour à vous,

Je suis en train de développer une navigation déroulante et prévue par la suite slidante avec l'intermédiaire de Jquery.
Menu avec images
Sous menu SANS IMAGE qui restent présentes à l'affichage... ( )

Mon menu fonctionne avec les images en background (technique off/on sur la meme image) mais dans la sous menu il m'est impossible de faire disparaitre les images...

Mon code html :

<div id="menu">
	<ul>
		<li class="item1"><a href="#">ITEM 1 </a>
			<ul>
				<li><a href="#">Sous item 1.1</a></li>
				<li><a href="#">Sous item 1.2</a></li>
				<li><a href="#">Sous item 1.3</a></li>
			</ul>
		</li>
		<li class="item2"><a href="#">ITEM 2 </a>
			<ul>
				<li><a href="#">Sous item 2.1</a></li>
				<li><a href="#">Sous item 2.2</a></li>
				<li><a href="#">Sous item 2.3</a></li>
			</ul>
		</li>
	</ul>
</div>

Mon css :

#menu {
 height:80px;
 }

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
 
#menu li {
 float:left;
 margin:auto;
 padding:0;
 }
 
#menu li a {
	display:block;
	width:91px;
	height:15px;
	color:#999966;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	padding-top: 45px;
	text-decoration: none;
	font-weight: bold;

 }
#menu li a:hover {
 color:#7A7A52;
 }
 
/*Disparition de la sous liste*/
#menu ul li ul {
	display:none;
 }
  /*Effet survol sous liste*/
 #menu ul li:hover ul {
 display:block;
 }
 
 /* SOUS LISTE */



/* LES ITEMS */
#menu li.item1 a {
background:url(item1.gif) no-repeat left top;
}

#menu li.item1 a:hover {
background:url(item1.gif) no-repeat left bottom;
}

#menu li.item2 a {
background:url(item2.gif) no-repeat left top;
}
#menu li.item2 a:hover {
background:url(item2.gif) no-repeat left bottom;
}

Quelqu'un peut il me mettre sur la bonne piste ? Merci beaucoup
Modifié par ToutePetiteTete (12 Jun 2010 - 12:44)

As-tu un exemple en images justement (ou une page en ligne) parce que je ne comprends pas trop ce que tu recherches?
Peut-être suffit-il simplement d'attribuer une classe à tes sous-menus pour dire que tu ne veux pas de Bg.
Modifié par Monsieur stresse (12 Jun 2010 - 13:16)

Merci d'avoir répondu mais non je n'ai rien en ligne à montrer pour l'instant.

C'est une navigation déroulante horizontale banale je dirais.
Dans la plupart des exos en ligne, les sous menu sont verticaux mais le mien est horizontal...

J'ai tenté de styler mon sous menu, par classe, par div pour éviter les images du menu qui s'y réaffichent en background mais je dois faire une erreur quelquepart.

Bonjour,

Ce sont tes sélecteurs CSS qui sont imprécis. Tu appliques tes images de fond à tous les éléments A enfants ou descendants d'un LI de premier niveau (identifié par une classe "item1", "item2", etc.). Donc bien sûr ça va concerner les liens des sous-menus.

Sélecteur trop imprécis: #menu li.item1 a
Sélecteur précis: #menu li.item1 > a

Pour les révisions sur les sélecteurs CSS ça se passe par là:
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php