# Multiple <li> styles in one <ul>?



## rathurosamal (Jul 22, 2009)

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:


Category
sub category
sub category
Category
sub category

If you visit the page, the first [*] 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 [*]'s:


Category
sub category
sub category
Category
sub category

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!


----------



## namenotfound (Apr 30, 2005)

Why not just use nested lists?


Main Cat 1
1
2
etc.

Main Cat 2
etc.


----------



## Big-K (Nov 22, 2003)

You can also take advantage of classes. [*] [*]


----------



## milmaker (Jul 21, 2009)

Big K is right...all you need to do is set up classes in your style sheet, and then call on them. I do it all the time when I create menu's with multiple levels.


----------



## JimmySeal (Sep 25, 2007)

Coulda sworn I responded to this thread. I must have forgotten to hit Submit



namenotfound said:


> Why not just use nested lists?
> 
> 
> Main Cat 1
> ...


This is invalid (x)HTML. li elements cannot be nested directly inside other li elements.

In order to have valid markup and have the CSS classes work in the hierarchical way you have defined them, you need to have the "subcategories" in lists inside the main categories:


```
[LIST]
     [*]Main category
          [LIST]
               [*]subcategory
               [*]subcategory
          [/LIST]
     [*]Main category
[/LIST]
```
It's also illegal to have the same ID on two elements. You should use class= instead.

Big-K's suggestion would also work.


----------

