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

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>
Headquarters
<div class="dropdown_2columns">
<div class="col_2">
<ul>
<li>Board</li>
<li>Staff</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.

Answer 2

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

Answer 3

I think this is impossible to answer without seeing a more complete snippet of the HTML. At the moment folks answering have to assume which element has the ID of #menu.
If the HTML looks like this:
<div id="menu">
<ul>
<li>
Headquarters
<div class="dropdown_2columns">
<div class="col_2">
<ul>
<li>Board</li>
<li>Staff</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
Then the solution would be:
#menu > ul > li > a { ... }
If the code looks like this:
<ul id="menu">
<li>
Headquarters
<div class="dropdown_2columns">
<div class="col_2">
<ul>
<li>Board</li>
<li>Staff</li>
</ul>
</div>
</div>
</li>
</ul>
Then the correct selector would be:
#menu > li > a { ... }
If it doesn't look like either of those snippets, then I'll need to see more of your code in order to better answer your question!
One more thing -- if you want to be even more specific you can also use first-child which would be implemented as:
#menu > ul > li > a:first-child { ... }
or...
#menu > li > a:first-child { ... }
...depending on your HTML.