Background Override For Dropdown Menu

I have the page linked below…

LINK-
http://www.securehostserver.info/anderson/about/

I have applied a body id for each section, the page linked above has the id=“about” and so I have added the rule #about #nav li.about a so that I can keep the rolled over state of that button to show the background. This is set to help the web visitor to show which page they are on.

No problems so far.

The problem comes when I tried to add the dropdown CSS rules. They work accurately on all of the dropdowns EXCEPT for the ones associated with the current page. So if you are on the about page, the about dropdown inherits the background image from the previous rule (#about #nav li.about a).

How can I make it so that all of the dropdowns (#about #nav li.about ul li a) do not show the background image?

Todd

Hi Todd,

As you have probably noticed you’ve got caught up in some hefty specificity rules there. That’s due to having those concatenated ID’s.

I usually put classes on my body element for page specific styling, not sure if that would have helped a lot here though. That gets IE6 working too since it will ignore the first ID when two ID’s are used in a concatenated selector.

On line 47 and 48 of your css is where you are resetting the li li a rules.

#nav li.home li a, #nav li.about li a, #nav li.companies li a, #nav li.corporate li a, #nav li.news li a, #nav li.contact li a { background: #044784; height: auto !important; padding: 0 8px; color: #FFF; text-indent: 0; width: 180px; margin: 0; cursor: pointer; border-top: 1px #949494 solid; }
#nav li.home li a:hover,#nav li.about li a:hover,#nav li.companies li a:hover,#nav li.corporate li a:hover,#nav li.news li a:hover,#nav li.contact li a:hover { background: #235CB3; color: #FFF; text-decoration: none; cursor: pointer; }

If you will add the page specific selectors alongside of the relevant selectors you will be able to get your styles back. Your basically just grouping the concatenated selectors in.

Sorry, I had to reformat it, that inline css is too troublesome for me to work with.

This should work -

#nav li.home li a, [COLOR=Blue]#home #nav li.home li a, [/COLOR]
#nav li.about li a, [COLOR=Blue]#about #nav li.about li a,[/COLOR]
#nav li.companies li a, [COLOR=Blue]#companies #nav li.companies li a,[/COLOR]
#nav li.corporate li a, [COLOR=Blue]#corporate #nav li.corporate li a,[/COLOR]
#nav li.news li a, #news [COLOR=Blue]#nav li.news li a,[/COLOR]
#nav li.contact li a, [COLOR=Blue]#contact #nav li.contact li a[/COLOR] {
    background: none repeat scroll 0 0 #044784;
    border-top: 1px solid #949494;
    color: #FFFFFF;
    cursor: pointer;
    height: auto !important;
    margin: 0;
    padding: 0 8px;
    text-indent: 0;
    width: 180px;
}
#nav li.home li a:hover, [COLOR=Blue]#home #nav li.home li a:hover,[/COLOR]
#nav li.about li a:hover, [COLOR=Blue]#about #nav li.about li a:hover,[/COLOR]
#nav li.companies li a:hover, [COLOR=Blue]#companies #nav li.companies li a:hover,[/COLOR]
#nav li.corporate li a:hover, [COLOR=Blue]#corporate #nav li.corporate li a:hover,[/COLOR]
#nav li.news li a:hover, [COLOR=Blue]#news #nav li.news li a:hover,[/COLOR]
#nav li.contact li a:hover, [COLOR=Blue]#contact #nav li.contact li a:hover[/COLOR]  {
    background: none repeat scroll 0 0 #235CB3;
    color: #FFFFFF;
    cursor: pointer;
    text-decoration: none;
}

And it did! Thanks so much. I guess I should have been able to figure that one out on my own… Nevertheless, I appreciate your fix and explanation. Thank you Rayzur!