Background color conflict in dropdown menu

[recce101]

I've been using the free Dropdown Menu CSS Generator at http://pixopoint.com/products/suckerfish_css/ with generally good results. In addition to using the generator as designed, I've created a template by tweaking and commenting the generator output. But in both cases, any background-color that I specify for "a:hover" in my regular CSS conflicts with and overpowers the desired hover background-colors in the menu CSS. I've posted a question at the PixoPoint site but have not yet received a response. I'm hoping some of the knowledgeable people here will start with this example (all of the code is visible through "view source") and see if a solution comes to mind:

http://wvpress.com/test/test11.html

Thanks,

Ned

[Rayzur]

Hi,

I just went through your test link and the sub test pages.
There is no need to define classes for all the other a:hovers on your page.

Just add a new ruleset for the hover states of the anchors in the #nav.
It's an ID so it will carry more weight and override your global "a:hover"

#nav li a {
display: block;
color: Sienna; /* mainitem normal font color */
text-decoration: none;
padding: 0px 10px;
text-align: center; /* for centered text */
}
#nav li a:hover {background:none;}

[recce101]

Amazing! While I don't fully understand why it works, it does. But I am curious to know why...

#nav li a:hover {
background: none;
}

...works but...

#nav li a:hover {
background-color: none;
}

...doesn't!! I did a Google for "background vs. background-color" and found a link that says "the shorthand background property is more widely supported than background-color." Does that make sense?

Regardless, thanks a million.

Ned

[Erik J]

Amazing! While I don't fully understand why it works, it does. But I am curious to know why...

Hi Ned,
That is because the value "none" is not a valid colour for the "background-color" property.

Using the value "none" with the shorthand "background" property works because; though the none value means no background-image, any background property that is not set in the shorthand rule will be reset to default value, which for bg-color is the value "transparent".

[recce101]

I see what you mean, Erik. And lending support to what you say, I find that

#nav li a:hover {
background-color: transparent;
}

does work! Though I'll probably stick with

#nav li a:hover {
background: none;
}

Anyone see any other tweaks that might be useful?

Ned

[RyanReese]

1) You can learn shorthand-this can be margin:0 auto;

#wrapper {
width: 90%;
text-align: left;
margin-left: auto;
margin-right: auto;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-top: 0;
border-left: 5px solid DarkKhaki;
border-right: 5px solid DarkKhaki;
background-color: CornSilk;
}

2) You have this

div {
margin: 0;
padding: 0;
}

Divs have no margins/paddings set by default so remove that
3) For moving the dropdown outa view and then into view, don't use left:-999em/left:auto because IE isn't too stable with that and the auto value can be influenced by a parent text-align

#nav li ul {
position: absolute;
left: 0;
margin-left:-999em;
width: 150px; /* subitem width plus 2px */
/*font-weight: xxxx;*/ /* if mainitem and subitem font weights differ */
margin: 0;
line-height: 1;
border-top: 1px solid SlateGray; /* subitem border */
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
margin-left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
margin-left:0;
background: LightGoldenRodYellow; /*subitem normal bg color */
}

Use taht above .

[recce101]

Ryan:

I changed the #wrapper margin property to shorthand, though not quite like you had it because of the -1000px margin-bottom, so it's now

...
margin: 0 auto -1000px auto;
...

and also took out the unnecessary div entry and simplified another div. But I couldn't get the dropdowns to work properly using margin instead of positioning (even after taking out the conflicting "margin: 0" just before "line-height: 1"). The dropdowns moved out of the way, but wouldn't come back into view at the right place when the main items were hovered. Is it just the earlier IE browsers that have trouble with the code as currently written? It works okay in IE7 and FF3.6, and I'm not too concerned with earlier IEs since I always try to make a site navigable even if it's just the main items that are displayed.

Here's an updated version with some other changes: http://wvpress.com/test/test14.html

Ned

[Rayzur]

though not quite like you had it because of the -1000px margin-bottom

Hi Ned,
Rather than using that 1000px bottom padding & negative bottom margin on your wrapper you might want to consider using min-height:100%;

I am guessing you were doing that to give your page a full height appearance with minimal content. If so it would be worthwhile to consider a Sticky Footer layout.

[recce101]

Thanks, I'll look into that.

Ned

[ryanhellyer]

I've posted a question at the PixoPoint site but have not yet received a response.

Sorry, I've been swamped with work and haven't been able to answer questions there for the past week and a bit (I run PixoPoint). If you haven't done so already, it would be handy if you could link back to this SitePoint topic on PixoPoint.com so that I know not to go answering the same questions twice ... once I get to it (probably in a couple of days time).

[recce101]

Thanks, Ryan. Actually, the test files I have uploaded here at SitePoint are different from the ones at PixoPoint, though they both asked about the same problem (which seems to have been solved by one of the guys here). The dropdown CSS in the files here has been modified some, and it will be great to have your comments. I'll post the link to these files in my PixoPoint thread tonight or tomorrow.

Just remember, being swamped with work beats the alternative!

Ned

[ryanhellyer]

Thanks.

It looks like the guys above have dealt to your question pretty well though. There isn't much more I can add.

I started work on a new version of the CSS generator which makes easier to work with code. I've cleaned a few bits and pieces up with it now and the next version should be a lot easier to figure out what goes where (hopefully). I've also added a little commenting to the CSS and split up the dropdown code from the top-level code to make it clear what applies to what rather than relying on some features passing down the cascade which seems to confuse many people.

[recce101]

Looking forward to seeing the new version. Aloha,

Ned