My nested <li> is inheriting the styles from its parent

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

You are targeting all As that are in LIs, so this behavior is as it should be.

There are many solutions to this "problem". The easiest way would be to target (with your CSS selector) just the first level of LIs with the "child selector":

#menu > li > a {
  ...
}

This should only affect the first level of As in the LIs.