CSS Issue - active state for navigation item

On the following test site (http://tronitech.brettatkin.com/index.asp), I want each navigation element to have a different look when it is the active page.

I have assigned a class to the anchor element when that page is active.

When I add the CSS inline, it works (the home page for example), but when I drop it in a c开发者_如何学JAVAlass it doesn't.

Here is my CSS:

#navigation ul li .active-link a {
    color: #326ea1;
    background-image: url(/images/nav-current.jpg);
    background-repeat: repeat-x;
}

I think it is something with inheritance, but I'm not seeing the issue...

Thanks

Brett

Change your selector to the following

#navigation ul li a.active-link

a .active-link tries to match an anchor tag with a child that has class active-link. a.active-link matches anchor tags with class active-link.

it's not #navigation ul li .active-link a but it should be #navigation ul li a.active-link. The first rule says link that is decendant of class active-link whlie second says link with a class active-link - which is what you've got in your markup.

In fact both selectors are way too long.