Question

I am styling my top level <li> to look like tabs. and on rollover a div shows but if there are nested <ul> <li>‘s in the div they inherit the same tab style as the top level <li>‘s

below is my style:

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px; 
    color: #ffffff;
    display:block;
    outline:0;
    text-decoration:none;
    padding:10px 9px 2px 9px;
    /* Background color and gradients */

    background: #da0000;
    background: -moz-linear-gradient(top, #b80202, #da0000);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b80202), to(#da0000));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

This is my HTML

<li>
    <a href="#">Headquarters</a>
    <div class="dropdown_2columns">
        <div class="col_2">
            <ul>
                <li><a href="board.php">Board</a></li>
                <li><a href="#">Staff</a></li>
            </ul>
        </div>
    </div>
</li>

I thought adding a class to the top level <li> would help but no luck. Is there something I am missing? when the code above runs “Board” and “Staff” both have a red tab effect on them.

Answer 1

Well, adding a class to the top level <li> won’t work – because the inner <a>‘s will still be affected by:

#menu li.myclass a

I.e., they’re anchor elements inside a <li> with class “myclass”.

Instead, you can change the rule to:

#menu > li > a

… meaning, only <a>‘s that are immediate children of <li>‘s, which are immediate children of #menu, will be affected (IE6 doesn’t support this). This is assuming it’s your <ul> that has the id “menu”.

Or you could use (mostly for IE6 compatibility):

#menu li li a
{
    /* Undo styles you applied to #menu li a */
}

Note that in this, you’ll have to reset/undo/”overwrite” all the styles previously set on #menu li a that you don’t want to apply to the inner anchors.

An alternative for IE6 – where you won’t need to reset/undo styles – is to set a class on the <a>‘s rather than the <li>‘s:

#menu li a.tab