Unwanted Left Padding On My Sub-menu...

[mboehler3]

In my navigation menu, there is unwanted left-padding given to my sub-menu, as seen here:All of the links have a background image, which creates a little bit of white space to look like padding, but my browsers are giving it an additional ~20pixels more padding. I have tried fooling around with the CSS but can't figure this out.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:0px;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;}

And my HTML:

<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;">How it works</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>	<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">FAQs</li>	</ul></li>

thank you for any help you can give me,

[Ingolme]

In this declaration:.navmenu960 ul li ul li aare you sure that the width is 220px? If the background image of the <a> element is not that wide, you'll have space on the right of it.

[mboehler3]

In this declaration:.navmenu960 ul li ul li aare you sure that the width is 220px? If the background image of the <a> element is not that wide, you'll have space on the right of it.

Actually you're suggestion in my other thread about removing the left-padding from the "top" delcaration caused the sub-menu to display properly, without adding the left padding. Thank you!