Here is my CSS code:
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style:none;
}
.horizontalcssmenu ul a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/* Styles for top level list items */
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
height: 34px;
top: 25px;
left: 111px;
width: 71px;
margin-left: 0px;
}
.horizontalcssmenu ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/* Styling for top level menu link items */
.horizontalcssmenu ul li a{
border: 2px solid #202020;
display: block;
width: 54px;
padding: 2px 8px;
text-decoration: none;
background: url(menubg.gif) center center repeat-x;
color: Red;
font: bold 13px Tahoma;
height: 27px;
margin-left: 0px;
}
/* Sub level menu */
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
.horizontalcssmenu ul li ul a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/* Styles for sub level menu list items */
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
.horizontalcssmenu ul li ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
/* Styling for sub level menu links */
.horizontalcssmenu ul li ul li a{
width: 100px;
font-weight: normal;
padding: 2px;
background: #663300;
border-width: 1px;
}
.horizontalcssmenu ul li ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
.horizontalcssmenu ul li a:hover{
color: #0066FF;
background: #FF0033;
text-decoration: none;
}
.horizontalcssmenu ul li a:active{
color: #00FFFF;
background: #FF0033;
text-decoration: none;
}
.horizontalcssmenu ul li ul li a:hover{
color: #00FFCC;
background: #CCCC66
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 1;
background: transparent url(image/bg-bubplastic-button.gif) no-repeat center left;
}
* html p#iepara{
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
I want to change the button color when the user navigates to a specific page and keep it that way until they leave. How can I achieve this effect?