Css superfish driving me potty


I have styled my horizontal menu but I am struggling a little I want the top li on the horizontal menu to have white text but the li in the drop down to be a different color


i am not having much luck, am i missing something obvious?

Cheers for looking

If I understand your question, you need to add a color: #fff; to .sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active{ }

i dont see a HZ menu AT ALL. :confused:
your site is minimized so I cant inspect it directly either.

but generally you can solve the issue this way:

.yourMenuClass li a{ color: #fff;}/** root level**/
.yourMenuClass li:hover li a{ color: red;}/** overrides root level rule**/

NOTE that am targeting the ANCHOR , not the LIs

hope that helps

Thank you for looking i am not sure why the menu is showing for you! Anyway I have un-minimised it

Hello Dave

yes i want the “top” level li to be one color (white) and the drop downs to be another color #222 in this case however I can’t seem to differntiate between the top level li and the others.

ok, try the following:

.sf-menu li a { color:#fff; }
.sf-menu li:hover li a { color:#222; }

am assuming your ‘horizontal’ menu is the one that starts with “home”…

yes thats the right one the “home”. thanks for looking at this. that suggestion which made perfect sense did not work :frowning:

That’s because the css that I put in in post #2 overrides it. It’s called specificity.

A quick infographic (pulled from http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html)

You would need something like this to get to the submenu (though in all cases you could get rid of the ul portions and get the same results…): .sf-menu ul li ul li:hover, .sf-menu ul li ul li a:hover


In line 236 of bridalwhite.css you don’t style the visited state of the link correctly.

.sf-menu li a,[B] a:visited [/B]{

color: #fff;

You just style a:visited again when you should be styling it like this:

.sf-menu li a,[B] .sf-menu li a:visited [/B]{
color: #fff;

Then because you messed that one up the following rules are more specific where you again use the wrong format.

.sf-menu  li li a, .sf-menu a:visited  {
    color: #222;

 .sf-menu li li li a, .sf-menu a:visited  {
     color: #111;

So the colour you get is #111 when the link is visited which is probably what you are seeing.

It looks like the above should have been:

.sf-menu  li li a, .sf-menu  li li a:visited  {
    color: #222;

 .sf-menu li li li a,  .sf-menu li li li a:visited  {
     color: #111;

great help. i can go to bed knowing i have one less problem to solve cheers