CSS Hover Menu Showing active menu item - html

Question

I have the following css:
#nav ul li {float: left; margin-right: 10px; }
#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;}
#nav ul li a:hover { background-color: #ea8206;}
This works as expected. What I would now like to do is have a class like this:
a.active { background-color: #ea8206;}
Which I would like to assign to whichever menu item is selected on a page, but this is not working.
I assume it's to do with precedence, and have tried various combinations of:
#nav ul li a.active {background-color: #ea8206;}
I think I am just struggling with the right combination.
And the HTML is:
<div id="nav">
<ul>
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
Could anyone point me in the right direction?
Many thanks

Answer 1

Here's a fiddle : http://jsfiddle.net/moonspace/aKLUS/
This is all about specificity...
As you've already referred to 'a' classes in the CSS but prefixed them with '#nav ul' these will override a simple 'a.active' definition. So, add the '#nav ul' before a.active (as per the fiddle) and it'll work . . .
#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;}
#nav ul li a:hover { background-color: #ea8206;}
#nav ul li a.active{ background-color: red; }
More useful stuff here : http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/