меню 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 nth-child selector

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

Селекторы nth-child установлены на дочернем элементе, а не на родительском

Чтобы ваш пример работал, я использовал селектор nth-child на li, а не ul,вот так:

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

И конечно же "