Css superfish driving me potty

HTML & CSS
1

Hello

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

http://test.princesssparkle.co.uk/index.php

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

Cheers for looking

2

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{ }

3

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

4

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

5

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.

6

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”…

7

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

8

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)

9

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

10

Hi,

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;
 }
11

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