mboehler3 Posted August 31, 2009 Share Posted August 31, 2009 I have created a background image to use for rollovers on my navigation menu. Sites I've looked at online suggest to combine your normal-state image and rollover image onto one image file, and in the CSS, use a <background-position: 0 -30px> on the rollover, to move the image down. Here is the image I've created to use:So, the green bar with a grey border is the normal state, and when the user rollover the link, the white bar with a grey border will display.But on my page, I do not see the white bar with a grey border on the rollover. This is what I see:In my CSS, I thought perhaps that the declarations I have in {.navmenu960 ul li ul li a:hover} are throwing the hover state off for my background image. So I removed the code and then this is what I see in my browser:Now it looks like everything is out of wack. The background image is 251pixels, so I don't know why there is extra space on the right hand side. Furthermore, why is there white space underneath every link? There is a height declaration of 30 pixels. Any help that you can offer is very much appreciated, as you can perhaps tell I am very frustrated with this and looking for a resolution.CSS: #navmenu {margin-right:0px;margin-left:-30px;background-color: #88ac2e;height: 30px;}.navmenu960 ul{margin: 0;padding: 0;list-style-type: none; font-size: 14px;font-family: Arial;z-index:4;}.navmenu960 ul li{position: relative;display: inline;float: left;text-align: left;font-size: 14px;color:#ffffff;z-index:15;}.navmenu960 ul li.aboutus {padding-left:5px; margin-right:-20px;}.navmenu960 ul li a{display: block;background: #88ac2e;color: white;padding: 3px 27px 0px;font-size: 15px;text-decoration: none;}.navmenu960 ul li a.payroll {display: block;background: #88ac2e;color: white;padding: 3px 20px 0px 25px;font-size: 15px;text-decoration: none;}.navmenu960 ul li a.aboutus {display: block;background: #88ac2e;color: white;padding: 3px 10px 0px 40px;font-size: 15px;text-decoration: none;}* html .navmenu960 ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;}.navmenu960 ul li a:hover{background: #ffffff; /*tab link background during hover state*/height: 25px;color: #88ac2e;display: block;border: solid 1px #ccc;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 5px; /*margin between li and drop-down menu*/}.navmenu960 ul li ul li{display: list-item;float: none;}.navmenu960 ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subnav-bckground.gif'); background-repeat:no-repeat; height:30px; width:251px;}.navmenu960 ul li ul li a.bckground:hover{background-position: 0 -30px;}.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubnavbckground.gif');} .navmenu960 ul li ul li.bottom {background: url('/images/v1_1/surechoice/main-bot1.gif') no-repeat 0 0; font-weight:bold; font-family:Arial; font-size:13px; height:34px; display:block; width:251px;}.navmenu960 ul li ul li.bottom:hover{background-position: 0 -34px; color: #88ac2e; width:251px;}.navmenu960 ul li ul li.top {background-image: url('/images/v1_1/surechoice/main-top1.gif'); background-repeat:no-repeat; height:45px; font-size:13px; font-weight:bold; display:block; width:251px;}.navmenu960 ul li ul li.top:hover{background-position: 0 -45px; color: #88ac2e; width:251px;}.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); height:33px; display:block; width:255px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; color: #88ac2e; width:255px;}.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subnav-bot1.gif'); height:8px; display:block; width:251px;}.navmenu960 ul li ul li a {font: normal 13px Arial;font-weight:bold;width: 220px; /*width of sub menus*/padding: 5px;margin: 0;padding-left:25px;} .navmenu960 ul li ul li ul {position: absolute;left: 0;display: block;visibility: hidden;padding-left:0px;padding-top: 0px; /*margin between li and drop-down menu*/}.navmenu960 ul li ul li a.payroll {font: bold 13px Arial;width: 251px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;padding-left:25px;background-image:url('/images/960/global/header-carrot-right.gif');background-repeat:no-repeat;background-position:right;} .navmenu960 ul li ul li ul li a:hover{ /*sub menus hover style*/background: #ffffff;color: #88ac2e;height:16px;border: solid 0px #ccc;}.subnavcarrot{background-position:right;} <div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a> <ul> <li class="top"><a href="#">How it works</a></li> <li><a href="#" class="bckground">Payroll Features</a> <ul> <li class="top"><div style="padding: 5px 0 0 25px;">Accounting Software Integration</div></li> <li><a href="/product/payroll/time-clock-integration.asp" class="bckground">Time Clock Integration</a></li> <li><a href="/product/payroll/1-clickpayroll.asp" class="bckground">1-Click™ Technology</a></li> <li><a href="#" class="bckground">Security</a></li> <li><a href="#" class="bckground">iPhone & Mobile Users</a></li> <li class="bottom"></li> </ul> </li> <li><a href="#" class="bckground">Payroll Pricing</a></li> <li><a href="/product/payroll/payroll-services.asp" class="bckground">Compare Payroll Services</a></li> <li><a href="/product/payroll/clergy-payroll.asp" class="bckground">Clergy Payroll</a></li> <li><a href="/guidedtour/" class="bckground">Guided Tour</a></li> <li><a href="/enroll/StartAccount.asp" class="bckground">New Payroll Enrollment</a></li> <li><a href="/login/login.asp" class="bckground">Customer Login</a></li> <li class="bottom"><div style="padding-left:25px;">FAQs</div></li> </ul></li><li><a href="/product/"><strong>Products & Services</strong></a> <ul> <li><a href="/product/401k/">401k Plans</a></li> <li><a href="/product/health-insurance/">Health Insurance</a></li> <li><a href="/product/workers-compensation/">Workers' Compensation</a></li> <li><a href="/product/screening/">Pre-Employment Screening</a></li> <li><a href="/product/compliance/">Compliance</a></li> </ul></li><li><a href="https://<%= Request.ServerVariables("SERVER_NAME") %>/surechoice/accountant_access.asp"><strong>Accountant Center</strong></a> <ul> <li><a href="/surechoice/surechoice-refer.asp">Refer a client</a></li> <li><a href="/surechoice/surechoice-resell.asp">Profit from Payroll</a></li> <li><a href="/surechoice/surechoice-rewards.asp">Rewards Program</a></li> <li><a href="/surechoice/what-is-surechoice.asp">Access Reports</a></li> <li><a href="/surechoice/surechoice-webinars.asp">Payroll Webinars</a></li> <li><a href="/surechoice/surechoice-resourcecenter.asp">Resource Center</a></li> </ul></li><li><a href="/spsite/resources/"><strong>Small Business Tools</strong></a> <ul> <li><a href="/calculator/">Payroll Calculators</a></li> <li><a href="/online-payroll/default_state.asp">State Payroll Tax Info</a></li> <li><a href="/spsite/resources/articles/">Helpful Payroll Articles</a></li> <li><a href="/online-payroll/">Payroll Terms</a></li> <li><a href="/video/">Small Business Videos</a></li> </ul></li><li><a href="#"><strong>Media Center</strong></a> <ul> <li><a href="/spsite/press/survey.asp">Main Street Insights</a></li> <li><a href="/scorecard/">Small Business Scorecard</a></li> <li><a href="/spsite/press/releases/">Press Releases</a></li> <li><a href="/contactus/">Contact Us</a></li> </ul></li><li class="aboutus"><a href="/spsite/company/" class="aboutus"><strong>About Us</strong></a> <ul> <li><a href="/spsite/company/company-awards.asp">Awards & Recognition</a></li> <li><a href="/spsite/company/testimonials.asp">Customer Testimonials</a></li> <li><a href="/spsite/company/partners.asp">Strategic Partners</a></li> <li><a href="/spsite/company/careers.asp">Careers at SurePayroll</a></li> <li><a href="/spsite/company/meet-the-team.asp">Meet Our Team</a></li> <li><a href="#">Security and Privacy</a></li> <li><a href="/contactus/">Contact Us</a></li> </ul></li></ul></div> Link to comment Share on other sites More sharing options...
mboehler3 Posted August 31, 2009 Author Share Posted August 31, 2009 Here is what the menu looks like on the rollover: Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.