CSS Menu - small issue with active state

I have a small issue with this CSS menu.  The menu uses an image made up of three parts.  The top part is normal behavior and middle is a rollover while the third (bottom) is the active state.  The problem is when active is active the rollover still works.  If move the hover style up above any of the active styles it fixes that issue only the hover style doesn't work anymore.  What I need is when a page is active the hover style to stop working.  

*This is an example of the image being used*
http://www.flickr.com/photos/58217883@N00/1524965622/


<div class="mainTopNav">
              <ul>
                          <li><a class="homePage" href="index.htm"><em>Home</em></a></li>
                        <li><a class="servicesPageActive" href="services.htm"><em>Services</em></a></li>
                        <li><a class="portfolioPage" href="portfolio.htm"><em>Portfolio</em></a></li>
                        <li><a class="testimonialsPage" href="testimonials.htm"><em>Testimonials</em></a></li>
                        <li><a class="quotePage" href="quote.php"><em>Order Services</em></a></li>
                    <li><a class="hostingPage" href="hosting-plans.htm"><em>Hosting Plans</em></a></li>
                  </ul>
            </div>


.mainTopNav {margin: 0;padding: 0;width: 800px;height: 31px;background-image: url(../images/menu_background.png); background-repeat: no-repeat}
.mainTopNav em { display: none}
.mainTopNav ul {float: left; padding: 0 0 0 13em; margin-top: 0px; list-style-type: none;}
.mainTopNav li { float: left; padding: 0; margin: 0; display: inline}
.mainTopNav li a { display: block; height: 31px;margin: 0;padding: 0 }
.mainTopNav li a.homePage {background: url(../images/menu_01.png) no-repeat left top; width: 54px }
.mainTopNav li a.homePageActive {background: url(../images/menu_01.png) no-repeat left bottom; width: 54px }
.mainTopNav li a.servicesPage { background: url(../images/menu_02.png) no-repeat left top; width: 58px}
.mainTopNav li a.servicesPageActive {background: url(../images/menu_02.png) no-repeat left bottom; width: 58px}
.mainTopNav li a.portfolioPage {background: url(../images/menu_03.png) no-repeat left top; width: 94px; margin: 0px; padding: 0px}
.mainTopNav li a.portfolioPageActive {background: url(../images/menu_03.png) no-repeat left bottom; width: 94px}
.mainTopNav li a.testimonialsPage {background: url(../images/menu_04.png) no-repeat left top; width: 106px}
.mainTopNav li a.testimonialsPageActive {background: url(../images/menu_04.png) no-repeat left bottom; width: 106px}
.mainTopNav li a.quotePage {background: url(../images/menu_05.png) no-repeat left top; width: 56px}
.mainTopNav li a.quotePageActive {background: url(../images/menu_05.png) no-repeat left bottom; width: 56px}
.mainTopNav li a.hostingPage { background: url(../images/menu_06.png) no-repeat left top; width: 80px}
.mainTopNav li a.hostingPageActive {background: url(../images/menu_06.png) no-repeat left bottom; width: 80px}
.mainTopNav li a:hover {background-position: left center }