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

[huhnej31]

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:

<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...

#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!

[vjm]

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

[Excavator]

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

#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.

[webdevs]

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