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