Active page menu background image css help
 

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;
}

Hi there.

Did you ever solve this? I'm trying to do exactly as you did but got stuck. You can see what I'm working on here: http://www.bg-handel.no/ and what I try to achieve here: http://www.dropsdesignkontor.no/bghandel/nettsiden.htm