Why does the a part here

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #ffffff;
}

trump the following when not actively hovered on

.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHover a, 
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:     #FFFAC0;
    outline:        0;
    color:      #7F4125;
}

while the background still applies. This is for a Superfish menu and the background stays highlighted when the menus are descended (correct), but the anchor text turns back to white (not correct). So the current item has the brown text, but all parent items have a white on cream, which doesn't work.

Any ideas?

3 answers

1
point
This was chosen as the best answer

I just downloaded all your code.

The issue is with the superfish invocation - superfish isn't doing anything on your page.

if you replace your method with this very simple one from the superfish site:

<script type="text/javascript"> 
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
});
</script>

(it needs to be in the head, before the menu)

then the CSS, as you have written it works just fine, and you can see the sfHover class on the li (using Safari's inspect element - that reads the dom) your original page isn't showing that class, so only the other CSS declarations are being applied.

in other words you're getting this:

.sf-menu li:hover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:     #FFFAC0;
    outline:        0;
    color:      #7F4125;
}

which is why the background is changing colour.

you need this:

.sf-menu li.sfHover, .sf-menu li.sfHover a {
    color:      #7F4125;
}

to make the top level <a> stay brown, or it reverts to white.

Answered over 7 years ago by Tony Crockford
  • Wow! I was sure it was the CSS. I guess that means I need to work it over a bit more. Thanks! Jared over 7 years ago
0
points

You don't have a declaration that covers the <a> inside a hovered <li> i.e. I can't see where you've applied class="sfhover" to any of the <li>'s

so the .sf-menu li.sfHover a, which is supposed to keep the heading item brown has no effect.

Answered over 7 years ago by Tony Crockford
  • The superfish plugin adds a .sfHover to the <LI>. Like I said, the background is working properly so that class is being activated. It's just the <a> part that isn't being inherited Jared over 7 years ago
  • I don't see where you're invoking the superfish plugin on that menu though? jQuery('#navbar div.menu').superfish({ pathClass: 'path'}); looks like it's applied to div class menu inside a div id=navbar or am I missing something? Tony Crockford over 7 years ago
0
points

Answering, instead of commenting, so you get prompted. Your superfish plugin is not referencing the ul as far as I can tell. The css will work on the drop downs, but without the superfish inserted classes, the top levels won't be colored correctly.

you are applying the plugin to #navbar div.menu when in fact the menu is #navbar ul.sfmenu

and that's why I can't see the styles being applied.

Answered over 7 years ago by Tony Crockford
  • Tony, thanks for looking at this. The styles are being applied correctly on the currently "hovered over" li>a. The "parent" li>a is just losing its color (while the parent li maintains the proper background color). Jared over 7 years ago
  • this .sf-menu li.sfHover a will never apply because the plugin is not being used on the menu. you have this: jQuery(document).ready(function(){ jQuery('#navbar div.menu').superfish({ pathClass: 'path'}); }); where is div.menu ? Tony Crockford over 7 years ago