Multiple <li> styles in one <ul>?

2 replies
  • WEB DESIGN
  • |
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!
#<li> #<ul> #multiple #styles
  • Profile picture of the author promo_guy
    I assume you got this working Susan? It seems both category and subcats have different bg colors
    {{ DiscussionBoard.errors[864691].message }}
  • Profile picture of the author rawservices
    Hey susan,


    you need to apply a class to the sub nave and I would suggests wrapping your list in a div, example:

    <div id="navigation">

    <ul>
    <li>Parent Nav </li>
    <li class="subnav"> Sub Nav </li>
    </ul>

    </div>


    then you would CSS like this basically:

    #navigation ul {

    Style it here

    }

    #Navigation ul li {

    Style a lil more if you want

    }

    .Subnav {

    Sub nav Style here

    }




    Hope this helps!

    -Ryan
    {{ DiscussionBoard.errors[864716].message }}

Trending Topics