Jump to content

Unwanted Left Padding On My Sub-menu...


Recommended Posts

In my navigation menu, there is unwanted left-padding given to my sub-menu, as seen here:leftpadding.gifAll 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,

Link to post
Share on other sites

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.

Link to post
Share on other sites
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!
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...