CodingForums.com - Navigation Menu: a:hover styling works, a.selected does not

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Navigation Menu: a:hover styling works, a.selected does not (http://www.codingforums.com/showthread.php?t=284090)

Navigation Menu: a:hover styling works, a.selected does not

Hello,

I have a simple navigation bar that I would like to change color over hover and remain that color when selected. The a:hover works great but the a.selected does not (even though the class="selected" does work for each individual page) This is how I have the list set up:

Code:

<ul id="kids_nav">

<li><a class="selected'" id="maggie" href="http://asdf.com">Maggie</a></li>

<li><a class="" id="dijon" href="http://agsdf.com">Dijon</a></li>

<li><a class="" id="brandon"href="http://asdsdf.com">Brandon</a> </li>

<li><a class="" id=""href="asdfg.com">Behind The Scenes</a></li>

</ul>

And here is most of my CSS so you can get the idea...

Code:

#kids_nav li a{

        

        font-size: 1.5em;

        font-weight: bold;

        color: #373737;

        padding: 5px;

        padding-left: 15px;

        padding-right: 15px;

}

#kids_nav li a#dijon{

        color: #00763f;

}



#kids_nav li a#dijon:hover, #kids_nav li a#dijon.selected{

        background-color: #00763f;

        color: #fff;

}



#kids_nav li a#brandon{

        color: #CD5400;

}



#kids_nav li a#brandon:hover, #kids_nav li a#brandon.selected{

        background-color: #CD5400;

        color: #fff;

}

Any advice would be great! Like I said, the class=selected works on all of the pages, the hover works, but I just cant get the items to remain highlighted. Thank you in advance!

if the class="selected" works on all of the pages, in what exact area it doesn't work? I'm confused.

Hello huhnej31,
#maggie.selected isn't right.
Try it like this instead -

Code:

#kids_nav li a#maggie:hover, .selected{

        background-color: #00763f;

        color: #fff;

}

You class selected has an extra ' in your markup that is screwing things up as well.

Here's another way of highlighting a menu item to show where you are.

Its easy to give hover text or background colour using CSS. give perticuler background colour or text colour on mouse hover class.