水平菜单与不同的背景图像为每个李

我正在寻找可以有不同背景图像的嵌套菜单，下面是代码做的一切，徘徊时显示不同颜色的子节点，但我想为每个不同的背景图像链接和一个单独的图像为子节点。目前它使用颜色。（链接的每个图像的大小将有所不同）水平菜单与不同的背景图像为每个李

<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; 
}

任何帮助或建议将不胜感激。日Thnx

来源

2011-10-27 Mr A

使用越来越长的嵌套选择每个菜单项的某些子元素将使它非常难以维持。如果你想返回并在3个月内更改菜单中第5个元素的颜色/图像，该怎么办？你如何找到它在CSS中的选择器？您可以使用更精确的选择器，如下面的答案中所述。 – Nico

，但第n个孩子在IE 7,8中没有支持。否则，这将是一个伟大的事情尝试：类似ul li：nth-child（n + 1）{background-image：url（'/ images/01。 PNG'）; } –

因此，为每个元素添加一个单独的类或id。无论如何，这是一个更清洁，更可维护的解决方案。例如。你不需要看HTML就知道改变CSS会做什么。 – Nico

你要么必须：
答：添加一个唯一的ID给每个李，然后在你的CSS，添加背景图片为LI
B：使用CSS3选择器：第n个孩子选择LI，然后以这种方式应用背景图像。

来源

2011-10-27 13:57:24 motoxer4533

css3选择器兼容wid所有浏览器，因为我使用css3是我以前的网站失败了在IE 6,7的UI测试 –

当然，内联样式也是一个选项，如果一个丑陋的。 – Blazemonger

但是第7个孩子在IE 7,8中没有支持。否则，这将是一件很棒的事情：像ul li：nth-child（n + 1）background-image：url（'/ images/01 .PNG'）; } –

你要么必须定义样式background: #4dafde none no-repeat scroll left middle然后在每个<li>的style属性覆盖background-image，或者你可能是一个有点世故：使li■找一个固定的宽度，然后申请一个背景图片到整个.myMenu在正确的位置（更大的文件，但具有适当的网页优化的差异应该是可以忽略的，甚至被一个HTTP请求的好处抵消了几个）的个人图像。

来源

2011-10-27 13:57:54

将试一试 –

jQuery可能是你正在寻找的

Css命令可以在这里找到。

css command

使用第n个孩子找到了UL父

nth-child info

来源

2011-10-27 14:01:07 user466764

对于第n个子项断开的链接 –