Hello,

I have been stumped working on this issue for about 2 days now, but havent been able to jump this hurdle:

transeca.com

My navigation is dynamically created in a loop:

<ul id="glossymenu">
<li>Category</li>
<li>sub category</li>
<li>sub category</li>
<li>Category</li>
<li>sub category</li>
</ul>

If you visit the page, the first <li> is 'Pet GPS' , this is a top level category. The next top level category is all the way at the bottom called 'Test'.

Basically Im trying to assign 2 different styles a 'Category' and 'sub category', my attempt at this is using an id on only the top level <li>'s:

<ul id="glossymenu">
<li id="maincat">Category</li>
<li>sub category</li>
<li>sub category</li>
<li id="maincat">Category</li>
<li>sub category</li>
</ul>

But I dont seem to be able to override the style in this manor:

#maincat li a{
background:#000000;
}

My stylesheet:
transeca.com/css/style.css

Any advice is deeply appreciated!

Well, for one thing your UL's aren't nested properly, they should be like this:

<ul>
<li>category
     <ul>
     <li>sub-category</li>
     </ul>
</li> /end of first category>

Then you could target the sub category using something like : ul ul{rules}.

Couldn't she just do an ul, and apply different classes to different categories of list items?

Then she could style them individually without becoming a bird from all that nesting.

If she wanted each one to be different, then yes, but that seems like an awful lot of extra work. It still doesn't change the fact that her nesting is incorrect.