[resolu] Menu deroulant avec et sans images

Bonjour,
Je tente, sans succès, d'adapter un menu déroulant en mettant des images sur le premier niveau mais je n'en veux pas dans le sous menu déroulant.
Hors mon sous-menu hérite du fonds images du 'li' supérieur.
Auriez vous une solution pour palier à ce problème?
Voici le html

<div>
<ul id="menu">
    <li class="acc"><a href="#" >&nbsp;</a></li>
    <li class="neu"><a href="#">&nbsp;</a></li>
    <li class="occ"><a href="#">&nbsp;</a></li>
    <li  class="loc"><a href="#">&nbsp;</a></li>            
    <li class="con"><a href="#">&nbsp;</a>
                <ul>
            		<li ><a href="#" >1</a></li>
					<li ><a href="#">2</a></li>
					<li ><a href="#">3</a></li>
					<li ><a href="#">4</a></li>
        </ul>
      </li>
</ul>
<script type="text/javascript">
    initMenu();
</script>

	</div>

et la css attachée

.menu{
	position:absolute;
	left: 50px;
	top: 115px;
	width: 562px;
	height: 20px;
	z-index: 1;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 10;
}
.menu ul{
    position: absolute;
    display: block;
    width: 185px;
    margin: 0; 
    padding: 0;
	}   
.menu li{		
    list-style: none;
    width: auto;
    height: auto;
    display: inline;
    display/**/: block;
    float: none;
    float/**/: left;
    margin: 0;
    padding: 0;
    }
.menu li li{
    display: block;
    float: none;
    }
/* correct a little IE bug */
* html .menu li li{ 
    display: inline;
    }
.menu a{
    text-align: left;
    color: #000;
    display: block;
    width: auto;
    text-decoration: none;
    padding: 2px 0;
    margin: 1px;
    }
.acc a{	background-image: url(../images/menu_png/1.png);     width: 44px; 
 }
 .acc a:hover{ background-image: url(../images/menu_png/1_on.png);
 }
.neu a{	background-image: url(../images/menu_png/2.png);     width: 30px; margin-left:8px;
 }
 .neu a:hover{background-image: url(../images/menu_png/2_on.png);
 }
.occ a{	background-image: url(../images/menu_png/3.png);     width: 57px; margin-left:8px;
 }
 .occ a:hover{ background-image: url(../images/menu_png/3_on.png);
 }
.loc a{	background-image: url(../images/menu_png/4.png);     width: 54px; margin-left:8px;
 }
 .loc a:hover{ background-image: url(../images/menu_png/4_on.png);
 }
.con a{ background-image: url(../images/menu_png/5.png);     width: 97px; margin-left:8px;
 }
 .con a:hover{ background-image: url(../images/menu_png/5_on.png);
 }
.menu li ul{
    visibility: hidden;	 
	background-color: #fff;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;    
	width: 185px;
    }
.menu li li ul{
    position: absolute;
    margin-left: 100px;
    margin-top: -20px;
	 }

Merci pour vos propositions
yvo

Bonjour yvo,

Toutes tes balises "a" ont une image en bg elles vont forcément se répéter

.acc a{	background-image: url(../images/menu_png/1.png);     width: 44px; 
 }
 .acc a:hover{ background-image: url(../images/menu_png/1_on.png);
 }
.neu a{	background-image: url(../images/menu_png/2.png);     width: 30px; margin-left:8px;
 }
 .neu a:hover{background-image: url(../images/menu_png/2_on.png);
 }
.occ a{	background-image: url(../images/menu_png/3.png);     width: 57px; margin-left:8px;
 }
 .occ a:hover{ background-image: url(../images/menu_png/3_on.png);
 }
.loc a{	background-image: url(../images/menu_png/4.png);     width: 54px; margin-left:8px;
 }
 .loc a:hover{ background-image: url(../images/menu_png/4_on.png);
 }
.con a{ background-image: url(../images/menu_png/5.png);     width: 97px; margin-left:8px;
 }
 .con a:hover{ background-image: url(../images/menu_png/5_on.png);
 }

essai de mettre ton image là:

.menu li{		
    list-style: none;
    width: auto;
    height: auto;
    display: inline;
    display/**/: block;
    float: none;
    float/**/: left;
    margin: 0;
    background-image: url(../images/menu_png/1.png);
    padding: 0;
    }

Bonjour Ipszy,
Merci pour ta reponse rapide mais à force de bidouiller ce menu j'avoue m'embrouiller completement:
Si je mets une image sur le 'li' elle se repete partout alors que mes images sont toutes differentes.
yvo

Bonjour,

Deux solutions (parmi d'autres).

1. Déplacer les classes sur les liens:

[b]HTML:[/b]
<li><a class="machin">Bla bla</a>
	<ul>...</ul>
</li>

[b]CSS:[/b]
a.machin {background: url(...) ...;}

2. Annuler l'image de fond sur les liens des sous-menus:

[b]HTML:[/b]
<li class="machin"><a>Bla bla</a>
	<ul>...</ul>
</li>

[b]CSS:[/b]
.machin a {background: url(...) ...;}
.menu li ul li a {background: none;}

Modifié par Florent V. (27 Nov 2007 - 14:53)

Bonsoir Florent,
Merci beaucoup pour ton aide
Ca marche nickel !!!
ce matin, j'avais pourtant testé le

CSS:
.menu li ul li a {background: none;}

mais comme souvent j'avais du faire une erreur de syntaxe...
yvo
Modifié par yvo (27 Nov 2007 - 18:33)