overriding an id

[michaellunsford]

I've created a CSS menu inside a simple table. The page the user is currently on is supposed to be different. I can pull it off if I inline the style, but trying a different id or class keeps getting over-riden.

I'm still a bit green with CSS, so any help would be great.

basic example (the actual code figures out what page they're on and assigns the class using PHP, if there's a way to do it with CSS, that'd be awesome, too) :

[code=php:0]<table id="menubar">
<tr>
<td><a href="page2.html">page2</a></td>
<td><a href="page3.html" class="highlightme">page3</a></td>
</tr>
</table>[/code]


CSS:

[code=php:0]
#menubar a {
background-color:inherit;
text-decoration:none;
border-left:2px solid #FFF;
border-right:2px solid #FFF;
border-top:none;
border-bottom:none;
color:#066;
}
#menubar a:hover, .highlightme a {
background-color:inherit;
color:#F90;
border-left:2px solid #F90;
border-right:2px solid #F90;
border-top:none;
border-bottom:none;
}
[/code]

[Daniel0]

Try this: [code]#menubar a:hover[class="hightlightme"] {[/code]

[michaellunsford]

the problem is the :hover state is also the "down" state. When I'm on the page in question, it's supposed to be locked at the hover state.

[Daniel0]

Ahhh, ok... then you would use this CSS code: [code]#menubar a {
background-color:inherit;
text-decoration:none;
border-left:2px solid #FFF;
border-right:2px solid #FFF;
border-top:none;
border-bottom:none;
color:#066;
}

#menubar a:hover, a.highlight {
background-color:inherit;
color:#F90;
border-left:2px solid #F90;
border-right:2px solid #F90;
border-top:none;
border-bottom:none;
}[/code]

Note: Please use the [nobbc][code][/nobbc]-tag instead of the [nobbc][php][/nobbc]-tag because of these reasons:
1. It is CSS code, not PHP code.
2. You cannot copy the code.
3. The [nobbc][code][/nobbc]-tag makes a box where you can scroll, that takes up less space if there is a lot of code.