Margin In Drop-down Menu Makes Nav Go Away In Ie

[mboehler3]

I am creating a new navigation menu for my website, and I want to give about a 10 pixel margin between the top navigation list items and my drop-down submenu list. I'm able to do that simply by giving a top margin to my "ul li ul." The problem is when you rollover from the top item to the sub-menu. In Firefox, the submenu stays visible when you mouse-over that 10 pixel margin. But in IE, once you mouse over the margin, the sub-menu disappears.Since it works in Firefox, I am hoping there is an easy way to make this work in IE. Does anyone have any experience with something like this, and/or can offer some advice?Here is my CSS:

#navmenu {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 24px 0px;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*/color: #88ac2e;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 12px; /*margin between li and drop-down menu*/}.navmenu960 ul li ul li{display: list-item;float: none;}.navmenu960 ul li ul li a{font: normal 13px Arial;font-weight:bold;width: 220px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;padding-left:25px;}   .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;}.subnavcarrot{background-position:right;}

And the HTML:

<div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/"><span align="left"><strong>Payroll</strong></span></a>	<ul>	<li><a href="#">How it works</a></li>	<li><a href="#" class="payroll">Payroll Features</a>		<ul>		<li><a href="#">Accounting Software Integration</a></li>		<li><a href="/product/payroll/time-clock-integration.asp">Time Clock Integration</a></li>		<li><a href="/product/payroll/1-clickpayroll.asp">1-Click™ Technology</a></li>		<li><a href="#">Security</a></li>		<li><a href="#">iPhone & Mobile Users</a></li>		</ul>	</li>	<li><a href="#">Payroll Pricing</a></li>	<li><a href="/product/payroll/payroll-services.asp">Compare Payroll Services</a></li>	<li><a href="/product/payroll/clergy-payroll.asp">Clergy Payroll</a></li>	<li><a href="/guidedtour/">Guided Tour</a></li>	<li><a href="/enroll/StartAccount.asp">New Payroll Enrollment</a></li>	<li><a href="/login/login.asp">Customer Login</a></li>	<li><a href="/spsite/service/faq.asp">FAQs</a></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><a href="/spsite/company/"><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>

Thank you very much,

[mboehler3]

I found a solution to this dilemma, using an image as the top <li> to "create" space between the top bar and sub menu.

[mboehler3]

I found a solution to this dilemma, using an image as the top <li> to "create" space between the top bar and sub menu.

Actually if anyone is looking at this thread, is there a way for IE to work with margins? It seems that when I add padding or a margin, and rollover it, IE makes the menu go away. Not in Firefox.