0
我正在尋找可以有不同背景圖像的嵌套菜單，下面是代碼做的一切，徘徊時顯示不同顏色的子節點，但我想爲每個不同的背景圖像鏈接和一個單獨的圖像爲子節點。目前它使用顏色。 （鏈接的每個圖像的大小將有所不同）水平菜單與不同的背景圖像爲每個李
<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
使用越來越長的嵌套選擇每個菜單項的某些子元素將使它非常難以維持。如果你想返回並在3個月內更改菜單中第5個元素的顏色/圖像，該怎麼辦？你如何找到它在CSS中的選擇器？您可以使用更精確的選擇器，如下面的答案中所述。 – Nico
，但第n個孩子在IE 7,8中沒有支持。否則，這將是一個偉大的事情嘗試：類似ul li：nth-child（n + 1）{background-image：url（'/ images/01。 PNG'）; } –
因此，爲每個元素添加一個單獨的類或id。無論如何，這是一個更清潔，更可維護的解決方案。例如。你不需要看HTML就知道改變CSS會做什麼。 – Nico