菜單CSS

Question

我有以下菜單：

<ul class="top-menu"> 
<li><a_href="/Products" title="Products"><span>Products</span></a><ul> 
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li> 
</ul> 
</li> 
<li><a_href="/Customers" title="Customers"><span>Customers</span></a></li> 
</ul> 

，我也有頂部菜單項（產品，客戶）精靈。 如何才能使菜單的頂級鏈接顯示圖像？ 想過的CSS第n個孩子選擇

ul.top-menu 
{ 
    list-style: none; 
    width:528px; 
} 

ul.top-menu li a 
{ 
    display:block; 
    float:left; 
    height:40px; 
    background-image:url(../Images/sprite-menu.png); 
    text-indent:-9999px; 
} 

ul.top-menu:nth-child(1) a 
{ 
    width:135px; 
    background-position:0 0; 
} 

，但它無法正常工作。 謝謝。

Answer 1

第n個孩子選擇的子元素，而不是母公司的設置

爲了讓你的榜樣的工作，我用李的第n個孩子選擇而不是UL，像這樣：

ul.top-menu li:nth-child(1) a 
{ 
    width:135px; 
    background-position:0 0; 
} 

當然，示例HTML中的「< a_href」標籤應該是「< a href」，不帶下劃線。

你可能想鏈子選擇

爲了實現我相信效果你想要的，這是隻有在頂級項目獲得的風格，我會用CSS子選擇器來代替：

/* desired top-level-only styles go here */ 
ul.top-menu>li>a 
{ 
    width:135px; 
    background-position:0 0; 
}