menu horizontal avec différente image de fond pour chaque li

Question

Je cherche un menu imbriqué qui peut avoir différentes images d'arrière-plan, ci-dessous est le code qui fait tout, afficher des sous-nœuds avec différentes couleurs lorsque survolé, mais je veux une image de fond différente lien et une image distincte pour les sous-nœuds. Actuellement, cela fonctionne en utilisant des couleurs. (La taille de chaque image pour les liens sera différente)

<div class="TopMenu"> 
    <ul class="myMenu"> 
     <li><a href="Home.aspx">Home</a></li> 
     <li><a href="About-Us.aspx">About us</a></li> 
     <li><a href="Products-For-Sale.aspx">For sale</a> 
       <ul> 
        <li><a href="Bedsheets-For-Sale.aspx">Bedsheets</a></li> 
        <li><a href="Rugs-For-Sale.aspx">Rugs</a></li> 
        <li><a href="Accessories-For-Sale.aspx">Accessories</a></li> 
       </ul> 
       </li> 

     <li><a href="News.aspx">News</a></li> 
     <li><a href="Services.aspx">Services</a></li> 

    </ul> 
</div><!--TopMenu--> 

/*style the main menu*/ 
    #header .myMenu { 
margin:0px; 
padding:0px; 
list-style:none; 
text-transform:uppercase; 
position:absolute; 
z-index:300; 
left:28px; 
top:108px; 
width:952px; 
    } 

#header .myMenu li 
{ 
    list-style: none; 
    float: left; 
    background-color: #4dafde; 
    line-height: 25px; 
    margin-right: 3px; 
    } 

#header .myMenu li a:link, .myMenu li a:visited 
{ 
display: block; 
text-decoration: none; 
background-color: #4dafde; 
padding: 0.5em 2em 0.5em 2em; 
margin: 0 0 0 0; 

} 

#header .myMenu li a:hover { 
background-color: #A4D6EE; 
} 



/*style the sub menu*/ 
#header .myMenu li ul 
    { 
position: absolute; 
visibility: hidden; 
margin: 0; 
padding: 0; 
background-color: #4dafde; 
} 

#header .myMenu li ul li { 
display:inline; 
float:none; 
} 

#header .myMenu li ul li a:link, .myMenu li ul li a:visited 
{ 
display:block; 
width: auto; 
text-decoration: none; 

} 

    #header .myMenu li ul li a:hover 
{ 
background-color: #A4D6EE !important; 
} 

Toute aide ou suggestion sera grandement appréciée. Thnx

Answer 1

Vous devez soit:
A: Ajouter un identifiant unique à chaque LI, puis dans votre CSS, ajouter une image de fond pour que LI
B: Utilisez le sélecteur CSS3: nième enfant sélectionnez le LI, puis appliquez l'image d'arrière-plan de cette façon.

Answer 2

Vous devez soit définir le style comme background: #4dafde none no-repeat scroll left middle puis passer outre background-image dans l'attribut style de chaque <li>, ou vous pourriez être un peu rusés: faire les li s ont une largeur fixe, puis appliquer une image d'arrière-plan à l'ensemble .myMenu qui a les images individuelles dans les bons endroits (plus gros fichier, mais avec une bonne optimisation web, la différence devrait être négligeable, même compensée par le bénéfice d'une requête HTTP sur plusieurs).

Answer 3

jQuery peut être ce que vous cherchez

commande Css se trouve ici.

css command

utilisation nième enfant de trouver certains éléments de l'enfant du parent ul

nth-child info