I can't seem to get my menu background image to work on the active pages. The hover works fine, but I'd like to have the image appear and remain static for whatever page the user is on. Maybe someone can take a look at my css below to see what I'm missing. I've managed to piece all this together from other posts, but can't figure out why my active page image won't stay on. Any help is appreciated - thanks!
Link to the site: http://overstreetinteriors.com.previewdns.com/
Here's my CSS:
div#menu1
{
background: #ffffff;
border: 0px;
}
ul.rMenu li a:link
{
color: #ff4001 !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 75px !important;
height: 25px !important;
text-align: center !important;
padding-top: 15px !important;
}
ul.rMenu li a:visited
{
color: #ff4001 !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 75px !important;
height: 25px !important;
text-align: center !important;
padding-top: 15px !important;
}
ul.rMenu li a:active
{
color: #000000 !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa/images/menu-over.gif) no-repeat scroll top center !important;
width: 75px !important;
height: 25px !important;
text-align: center !important;
padding-top: 15px !important;
}
ul.rMenu li a:hover
{
color: #000000 !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa/images/menu-over.gif) no-repeat scroll top center !important;
width: 75px !important;
height: 25px !important;
text-align: center !important;
padding-top: 15px !important;
}