Jump to content

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

Recommended Posts

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." topnavsshot.gifThe 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,

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

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.

  • Create New...