Rollover With Background Image Looks Distorted When Link Is Added...

[mboehler3]

Hi, I am working on the navigation for my website. I want to create a rounded-corners look to my drop down menu, so I have created a background-image used for the first and last tabs on the drop-down. Without adding a link to the first tab, it looks fine:But when I just add a <a href="#"> </a> around it, it looks like this:Here is my HTML Code, with the a href added:

<div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="#">How it works</a></div></li>	<li><a href="#" class="bckground">Payroll Features</a>		<ul>		<li class="top">Accounting Software Integration</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>

And here is my CSS:

#navmenu {margin-right:-30px;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 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: 27px;color: #88ac2e;display: block;}.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');}.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; padding-left:25px;}.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; padding-left:25px; 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:-50px;padding-top: 0px; /*margin between li and drop-down menu*/}.navmenu960 ul li ul li a.payroll {font: bold 13px Arial;width: 220px; /*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 a:hover{ /*sub menus hover style*/background: #ffffff;color: #88ac2e;height:16px;border: solid 0px #ccc;}.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;}

Thank you for your help,

[Ingolme]

The problem is that your li.top declaration has padding-left:25px So the <a> element within is pushed 25px to the right.

[mboehler3]

The problem is that your li.top declaration has padding-left:25px So the <a> element within is pushed 25px to the right.

Well I need to use the padding in order to get my text aligned with the other links... so when I went into my code and removed the padding declaration, this is what I see:So it's now completely ignoring my background image... but at least it has the padding! What can I change in my CSS to display the entire background image?

[mboehler3]

Well I need to use the padding in order to get my text aligned with the other links... so when I went into my code and removed the padding declaration, this is what I see:So it's now completely ignoring my background image... but at least it has the padding! What can I change in my CSS to display the entire background image?

Is something overriding the background image to give it that green color?

[Ingolme]

Check the li.top declaration to see what's in it.Also, in this line:

<li class="top"><div style="padding-top:20px;"><a href="#">How it works</a></div></li>

You can remove the <div> element and apply the padding right to the li.top element