Hello,

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

http://www.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:
http://www.transeca.com/css/style.css

Any advice is deeply appreciated!

First of all, you can't have two id's with the same name. Use classes for that.

Try targeting the links instead of the li since that is what you are styling here <a href="#" class="maincat">
Then in css use:
#glossymenu li a.maincat:link { your styling for this link }

On a side note, your title is all screwed up from using <br />

Also, if you want a multi-level menu, then your structure needs to change from this:

<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>

To this:

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