Rollover State Does Not Recognize Text...

[mboehler3]

I am using a rollover nav menu with no margins. Instead, I'm using a background image for the top, rounded corner list item that has some white space at the top, giving the idea that margin/padding is being used. Here is the image that I use for the first list item:Now here is how the menu should look, when the user rolls-over "Product":The problem is when the user rolls-over in the white space between the top nav and the sub menu. I've added a giant arrow to replicate my mouse:As you can see, the text "disappears," or turns white. But, when the mouse moves down a little bit, the text displays:I'm confused on why this is happening. As you may be able to tell, the text is supposed to stay green in the 2nd screen shot, immediately when the green bar turns to white. If you need more information please do not hesitate to ask, thank you for your help.

[mboehler3]

Here is 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;"><a href=#">How it works</a></div></li>	<li><a href="#" class="bckgroundarrow">Payroll Features</a>		<ul>		<li class="top"><div style="padding-top:5px;"><a href="#">Accounting Software Integration</a></div></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 class="bottom"><a href="#">iPhone & Mobile Users</a></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"><a href="#">FAQs</a></li>	</ul></li><li><a href="/product/"><strong>Products & Services</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/product/401k/">401k Plans</a></div></li>	<li style="width:251px;"><a href="/product/health-insurance/" class="bckground">Health Insurance</a></li>	<li><a href="/product/workers-compensation/" class="bckground">Workers' Compensation</a></li>	<li><a href="/product/screening/" class="bckground">Pre-Employment Screening</a></li>	<li class="bottom"><a href="/product/compliance/">Compliance</a></li>	</ul></li><li><a href="https://localhost/surechoice/accountant_access.asp"><strong>Accountant Center</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/surechoice/surechoice-refer.asp">Refer a client</a></div></li>	<li style="width:251px;"><a href="/surechoice/surechoice-resell.asp" class="bckground">Profit from Payroll</a></li>	<li><a href="/surechoice/surechoice-rewards.asp" class="bckground">Rewards Program</a></li>	<li><a href="/surechoice/what-is-surechoice.asp" class="bckground">Access Reports</a></li>	<li><a href="/surechoice/surechoice-webinars.asp" class="bckground">Payroll Webinars</a></li>	<li class="bottom"><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 class="top"><div style="padding-top:20px;"><a href="/calculator/">Payroll Calculators</a></div></li>	<li style="width:251px;"><a href="/online-payroll/default_state.asp" class="bckground">State Payroll Tax Info</a></li>	<li><a href="/spsite/resources/articles/" class="bckground">Helpful Payroll Articles</a></li>	<li><a href="/online-payroll/" class="bckground">Payroll Terms</a></li>	<li class="bottom"><a href="/video/">Small Business Videos</a></li>	</ul></li><li><a href="#"><strong>Media Center</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/spsite/press/survey.asp">Main Street Insights</a></div></li>	<li style="width:251px;"><a href="/scorecard/" class="bckground">Small Business Scorecard</a></li>	<li><a href="/spsite/press/releases/" class="bckground">Press Releases</a></li>	<li class="bottom"><a href="/contactus/">Contact Us</a></li>	</ul></li><li class="aboutus"><a href="/spsite/company/" class="aboutus"><strong>About Us</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/spsite/company/company-awards.asp">Awards & Recognition</a></div></li>	<li style="width:251px;"><a href="/spsite/company/testimonials.asp" class="bckground">Customer Testimonials</a></li>	<li><a href="/spsite/company/partners.asp" class="bckground">Strategic Partners</a></li>	<li><a href="/spsite/company/careers.asp" class="bckground">Careers at SurePayroll</a></li>	<li><a href="/spsite/company/meet-the-team.asp" class="bckground">Meet Our Team</a></li>	<li><a href="#" class="bckground">Security and Privacy</a></li>	<li class="bottom"><a href="/contactus/">Contact Us</a></li>	</ul></li></ul></div>

And CSS:

#navmenu {margin-right:0px;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.aboutus {padding-left:5px; margin-right:-20px;}.navmenu960 ul li a{display: block;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 30px 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: 25px;color: #88ac2e;display: block;border: solid 1px #ccc;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 2px; /*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'); background-repeat:no-repeat; height:25px; width:auto;}.navmenu960 ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navmenu960 ul li ul li a.bckgroundarrow {background-image: url('/images/v1_1/surechoice/subnav-bckgroundarrow.gif'); background-repeat:no-repeat; height:25px; width:auto;}.navmenu960 ul li ul li a.bckgroundarrow:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubback.gif'); background-repeat:no-repeat; height:25px;}	.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px;}.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;}.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; width:251px;}.navmenu960 ul li ul li.top:hover{background-position: 0 -45px; width:251px; color:#88ac2e; display:block; height:45px;}.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); height:33px; display:block; width:265px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subbotback.gif'); height:32px; display:block; width:265px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li a {font: normal 13px Arial;font-weight:bold;width: auto; /*width of sub menus*/margin: 0;}   .navmenu960 ul li ul li ul {position: absolute;left: 0;display: block;visibility: hidden;padding-left:0px;padding-top: 0px; }.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*/color: #88ac2e;height: auto;border: solid 0px #ccc;}.navmenu960 ul li ul li ul li a:hover{ /*sub menus hover style*/color: #88ac2e;height:auto;border: solid 0px #ccc;}.subnavcarrot{background-position:right;}

[Ingolme]

Add a style for the <a> element that's inside .top when the mouse is over

.navmenu960 ul li ul li.top:hover a { color: color; }

[mboehler3]

Add a style for the <a> element that's inside .top when the mouse is over

.navmenu960 ul li ul li.top:hover a { color: color; }

Thank you, that worked - but now a small part of the left and right borders go away when you rollover the text, as seen here:

[Ingolme]

Thank you, that worked - but now a small part of the left and right borders go away when you rollover the text, as seen here:

Hmm, it seems your <a> element and the <li> element have different background declarations.Add this to the a element that's a descencent of li.top: margin: 0 1px;

[mboehler3]

Hmm, it seems your <a> element and the <li> element have different background declarations.Add this to the a element that's a descencent of li.top: margin: 0 1px;

Like this?

.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; width:251px; margin: 0 1px;}

[Ingolme]

No, it has to go on the <a> element within it:The width must be set to auto (to cancel out any width settings there may have been before) in order for the margin to work properly.

.navmenu960 ul li ul li.top a {  display: block;  margin: 0 1px;  width: auto;  height: ...;}

[mboehler3]

No, it has to go on the <a> element within it:The width must be set to auto (to cancel out any width settings there may have been before) in order for the margin to work properly.

.navmenu960 ul li ul li.top a {  display: block;  margin: 0 1px;  width: auto;  height: ...;}

Thank you for your help, now I have the same issue with the sub, sub menu. I applied the same CSS for the ul li ul li ul li... here's what I see when I rollover the top:Here's my CSS:

.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); height:33px; display:block; width:295px;}.navmenu960 ul li ul li ul li.top a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; height:33px; color: #88ac2e; width:295px;}

[mboehler3]

UPDATE:I'm still having trouble with this sub-sub-menu. When you rollover the top and bottom, you get a break in the left gray border:And now the first link breaks onto two lines. But, when I change the width of ".navmenu960 ul li ul li ul li.top" from 265 to 285, I see this:I don't get it - why does the text break? It can obviously fit onto one line. And why does the border go away on a rollover?Here is my CSS:

/* Second Level Top */.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); background-repeat:no-repeat; height:33px; display:block; width:265px; margin: 0 1px;}.navmenu960 ul li ul li ul li.top a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; display:block; height:33px; color: #88ac2e; width:265px;}/* Second Level Middle */.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubback.gif'); background-repeat:no-repeat; height:25px; width:212px;}.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; width:212px;}/* Second Level Bottom */.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subbotback.gif'); height:32px; display:block; width:265px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom a {display: block; margin: 0 1px; width: auto;}

And the HTML:

<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="bckgroundarrow">Payroll Features</a>		<ul>		<li class="top"><div style="padding-top:5px;"><a href="#">Accounting Software Integration</a></div></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 class="bottom"><a href="#">iPhone & Mobile Users</a></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"><a href="#">FAQs</a></li>	</ul></li>

Any help is appreciated!

[Ingolme]

What you'll have to do is to remove the height declaration from li.top and put a min-height one instead.Once you've done that, remove the margin from the <a> element and use a border instead:

border: 1px solid #CCCCCC;border-width: 0 1px;

[mboehler3]

What you'll have to do is to remove the height declaration from li.top and put a min-height one instead.Once you've done that, remove the margin from the <a> element and use a border instead:

border: 1px solid #CCCCCC;border-width: 0 1px;

Making these changes to the CSS:

.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); background-repeat:no-repeat; min-height:1; display:block; width:265px; margin: 0 1px;}.navmenu960 ul li ul li ul li.top a {display: block; border: 1px solid #CCCCCC; border-width: 0 1px;width: auto;}

Rendered this:Doesn't the li.top need a height declaration, since the image is 66 pixels, and the bottom 33 are the rollover?

[Ingolme]

Right, that makes things more difficult. Because the only way to deal with wrapping text is increasing the vertical size of the container.Maybe you can find a shorter word to put there, or design the whole menu to be overall wider.

[mboehler3]

Maybe you can find a shorter word to put there, or design the whole menu to be overall wider.

I can make the submenu wider, that is no problem. But with this new code, even when I remove the third word, it still looks funky:

[Ingolme]

I can make the submenu wider, that is no problem. But with this new code, even when I remove the third word, it still looks funky:

Just leave the code as you had it before. The new code was intended to give space for the text to wrap, but it's not necessary if the text isn't supposed to wrap.

[mboehler3]

Just leave the code as you had it before. The new code was intended to give space for the text to wrap, but it's not necessary if the text isn't supposed to wrap.

But the page doesn't look how I want it to... there is white space underneath the top link, and there is a gray border that sticks out on the left. So I want to change the code, but I don't know what's wrong.

[mboehler3]

But the page doesn't look how I want it to... there is white space underneath the top link, and there is a gray border that sticks out on the left. So I want to change the code, but I don't know what's wrong.

I found a solution, using this CSS:

/* Second Level Top */.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); background-repeat:no-repeat; height: 33px; display:block; width:265px; margin: 0 1px; margin-left:-1px;}.navmenu960 ul li ul li ul li.top a {display: block; width: auto; margin: 0 7px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; display:block; height:33px; color: #88ac2e; width:265px;}/* Second Level Middle */.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubback.gif'); background-repeat:no-repeat; height:25px; width:212px; margin-left:-1px;}.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; width:212px;}/* Second Level Bottom */.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subbotback.gif'); height:32px; display:block; width:265px; margin-left:-1px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom a {display: block; margin: 0 7px; width: auto;}

Thanks Ingolme for your help.