We help IT Professionals succeed at work.

CSS Menu - small issue with active state

Last Modified: 2013-11-19
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*

<div class="mainTopNav">
                          <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>

.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 }
Watch Question

sorry that site is blocked here
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>Site Blocked - 'DEHB9 E-8H1</title>
All-around developer
Unlock this solution and get a sample of our free trial.
(No credit card required)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.