Menu met focus

[joostsoo]

Ik probeer een menu te maken waarbij de activer keuze een andere kleur heeft dan de niet active pagina's
Ik krijg wel een kleur verandering met .hover maar ik heb met .focus of .active lukt het niet.
Hoe moet ik dit aanpakken?
hier is een stukje uit het stuylesheet

#headermenu a {
/* color: #5ea628; */
text-decoration:none;
padding-right: 0px;
padding-left: 30px;
font-weight: normal;
font-family: Lucida Sans, Verdana, Arial, Helvetia, sans-serif;
}

#headermenu a:link {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:visited {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:focus {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:hover {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:active {text-decoration: none; color: #009ac0;} /* blauw */


#headermenu {
text-align:left;
font-size: 12px;
height: 40px;
width: 1000px;
padding-top: 1px;
padding-right: 0px;
}

Iemand een idee?

Alvast bedankt, Joost

[pasmaskas]

Niet getest maar mischien helpt het?

http://www.richnetapps.com/automaticall ... t_page_in/

[staartmees]

Een standaard cmsms menu gebruikt class="currentpage".
In je css wordt dat dan: #headermenu a:currentpage

[Adheera]

#headermenu a {
/* color: #5ea628; */
text-decoration:none;
padding-right: 0px;
padding-left: 30px;
font-weight: normal;
font-family: Lucida Sans, Verdana, Arial, Helvetia, sans-serif;
}

#headermenu a:link {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:visited {text-decoration: none; color: #5ea628;} /* groen */
#headermenu a:focus {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:hover {text-decoration: none; color: #009ac0;} /* blauw */
#headermenu a:active {text-decoration: none; color: #009ac0;} /* blauw */


#headermenu {
text-align:left;
font-size: 12px;
height: 40px;
width: 1000px;
padding-top: 1px;
padding-right: 0px;
}

Even met Firefox, Firebug kijken wat de current page code is
Kan zijn class="current" of ook zijn class="menuactive" ofzo
Je kunt ze ook bij elkaar zetten

#headermenu a:link, #headermenu a:visited {
text-decoration: none;
color: #5ea628;
} /* groen */
#headermenu a:focus, #headermenu a:hover, #headermenu li.menuactive {
text-decoration: none;
color: #009ac0;
}

Nooit a:focus bij navigatie, kan niet op links
Da's voor formuliervelden
http://www.w3schools.com/cssref/sel_focus.asp