CSS menu current or active style

[QBall777]

Hi all,

I have a css menu that works fine, however I want to add a current style the same as the hover style. Normally I can do this with out any hassle but with this particular menu I'm really struggling.

I have attached the css code below, hope someone can help.

Thanks



#slidetabsmenu {
float:left;
width:100%;
height: 65px;
font-size:13px;
line-height:normal;
font-family: "Trajan Pro";
background-attachment: scroll;
background-image: url(../Images/stage_top.jpg);
background-repeat: no-repeat;
background-position: center bottom;

}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 19px;
padding:0;
}

#slidetabsmenu li{
display:inline;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#slidetabsmenu a {
float:left;
height: 55px;
background:url(../Images/tab-left.jpg) no-repeat left top;
text-decoration:none;
margin-top: 0;
margin-right: 8px;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 9px;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(../Images/tab-right.jpg) no-repeat right top;
font-weight:bold;
color:#3B3B3B;
padding-top: 20px;
padding-right: 14px;
padding-bottom: 3px;
padding-left: 5px;
height: 32px;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: black;
}


#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}



[Rowsdower!]

Assign a class of "current" (can be done dynamically with PHP, if you have that available on the server-side...otherwise just hard-code it in individual pages as appropriate) to a link when it is in the current page and then add these highlighted bits to your CSS:

#slidetabsmenu a:hover span[ICODE], #slidetabsmenu a.current span[/ICODE] {
color: black;
}

#slidetabsmenu a:hover[ICODE], #slidetabsmenu a.current:hover[/ICODE] {
background-position:0% -125px;
}

#slidetabsmenu a:hover span[ICODE], #slidetabsmenu a.current span[/ICODE] {
background-position:100% -125px;
}

That should be a 1:1 copy of the hover style.