Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 513
  • Last Modified:

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 }
0
chadaort
Asked:
chadaort
1 Solution
 
GawaiCommented:
sorry that site is blocked here
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Site Blocked - 'DEHB9 E-8H1</title>
0
 
chadaortAuthor Commented:
0
 
Eddie ShipmanAll-around developerCommented:
Since you are only going to use one per page, add an id seletor like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
        <title>Rollover Test</title>
      <style type="text/css">
     .mainTopNav {margin:0; padding:0; width:800px; height:31px; background-image:url(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(menu_01.png) no-repeat left top; width: 54px;}
     .mainTopNav li a.homePageActive {background:url(menu_01.png) no-repeat left bottom; width: 54px;}
     .mainTopNav li a:hover {background-position:left center;}
        #active {background:url(menu_01.png) no-repeat left bottom; width:54px;}
      </style>
  </head>
  <body>
  <div class="mainTopNav">
    <ul>
      <li><a id="active" href="index.htm"><em>Home</em></a></li>
    <!-- <li><a id="activePage"><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>
  </body>
</html>
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now