Superfish text color with parent - Really need help, thanks

[garyh]

I am new to superfish and generally have the menu working except for
one problem. When navigating to a sub menu the parent is properly
keeping it's background color but the text color is reverting to its
normal color. There is a link to the site below to see an example.

http://dev.beckermd.com/


Herre is the associated css
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu
a:hover, .sf-menu a:active
{
background: #AB8890 URL(../images/menu_btn_hover_2.gif) repeat-x
scroll 0 0;
outline: 0;
color: #FFFFFF;
}


This site seems to implement it properly but I cannot tell where my
issue is.

http://jquerystuff.net/random/superfish/

[Nathan Klatt]

Post by garyh
I am new to superfish and generally have the menu working except for
one problem. When navigating to a sub menu the parent is properly
keeping it's background color but the text color is reverting to its
normal color. There is a link to the site below to see an example.
http://dev.beckermd.com/

Hey Gary,

Not having easier access to your code I'm not sure if this is the best
fix for your issue but adding the specifier ".sf-menu li.sfHover > a"
to line 93 of your superfish.css file (currently has .sf-menu
li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover,
.sf-menu a:active) seems to do the trick.

Nathan

[Gary Herbstman]

Cool, That did the trick, THANKS!

I would love to understand this better. What exactly is this doing?



-----Original Message-----
From: jquery-***@googlegroups.com [mailto:jquery-***@googlegroups.com] On
Behalf Of Nathan Klatt
Sent: Tuesday, February 09, 2010 16:25
To: jquery-***@googlegroups.com
Subject: Re: [jQuery] Superfish text color with parent - Really need
help, thanks

Post by garyh
I am new to superfish and generally have the menu working except for
one problem. When navigating to a sub menu the parent is properly
keeping it's background color but the text color is reverting to its
normal color. There is a link to the site below to see an example.
http://dev.beckermd.com/

Hey Gary,

Not having easier access to your code I'm not sure if this is the best
fix for your issue but adding the specifier ".sf-menu li.sfHover > a"
to line 93 of your superfish.css file (currently has .sf-menu li:hover,
.sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu
a:active) seems to do the trick.

Nathan

[Nathan Klatt]

Post by Gary Herbstman
Cool, That did the trick, THANKS!

You're welcome.

Post by Gary Herbstman
I would love to understand this better. What exactly is this doing?

Well, what's happening is the cascade. Where there are style clashes,
whatever rule is the most specific/has the highest specificity will be
applied. Read through this first link - or even just the table at the
top - with an eye for the rule you had and what I added and I think
you'll get it.

http://www.w3.org/TR/CSS21/selector.html
http://www.w3.org/TR/CSS21/cascade.html

Nathan

[Gary Herbstman]

So ".sf-menu li.sfHover > a"

Applies that style to any A element that is a child of li.sfHover that
is a descendent of sf-menu.

What in superfish is happening? Is the code setting the attribute
sfHover to the item when you traverse its children?

-----Original Message-----
From: jquery-***@googlegroups.com [mailto:jquery-***@googlegroups.com] On
Behalf Of Nathan Klatt
Sent: Tuesday, February 09, 2010 8:02 PM
To: jquery-***@googlegroups.com
Subject: Re: [jQuery] Superfish text color with parent - Really need
help, thanks

Post by Gary Herbstman
Cool, That did the trick, THANKS!

You're welcome.

Post by Gary Herbstman
I would love to understand this better. What exactly is this doing?

Well, what's happening is the cascade. Where there are style clashes,
whatever rule is the most specific/has the highest specificity will be
applied. Read through this first link - or even just the table at the
top - with an eye for the rule you had and what I added and I think
you'll get it.

http://www.w3.org/TR/CSS21/selector.html
http://www.w3.org/TR/CSS21/cascade.html

Nathan

[Nathan Klatt]

Post by Gary Herbstman
So ".sf-menu li.sfHover > a"
Applies that style to any A element that is a child of li.sfHover that
is a descendent of sf-menu.

Right.

Post by Gary Herbstman
What in superfish is happening? Is the code setting the attribute
sfHover to the item when you traverse its children?

Just about - it looked like superfish was adding the sfHover class to
each item as it was hovered over and its menu expanded.

You can use the Firefox addon Firebug to watch the classes and styles change.

Nathan