SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    South Coast United Kingdom
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css superfish driving me potty

    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. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,267
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    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{ }
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    i dont see a HZ menu AT ALL. :/
    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. #4
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    South Coast United Kingdom
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for looking i am not sure why the menu is showing for you! Anyway I have un-minimised it

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    South Coast United Kingdom
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    South Coast United Kingdom
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes thats the right one the "home". thanks for looking at this. that suggestion which made perfect sense did not work

  8. #8
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,267
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by wildchief View Post
    yes thats the right one the "home". thanks for looking at this. that suggestion which made perfect sense did not work
    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/ar...city_wars.html)
    Attached Images Attached Images
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  9. #9
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,267
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by wildchief View Post
    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.
    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
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    .sf-menu li a, a:visited {
    
    color: #fff;
    }
    You just style a:visited again when you should be styling it like this:

    Code:
    .sf-menu li a, .sf-menu li a:visited {
    color: #fff;
    }
    Then because you messed that one up the following rules are more specific where you again use the wrong format.

    Code:
    .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:

    Code:
    .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. #11
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    South Coast United Kingdom
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you

    great help. i can go to bed knowing i have one less problem to solve cheers
    Quote Originally Posted by Paul O'B View Post
    Hi,

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

    Code:
    .sf-menu li a, a:visited {
    
    color: #fff;
    }
    You just style a:visited again when you should be styling it like this:

    Code:
    .sf-menu li a, .sf-menu li a:visited {
    color: #fff;
    }
    Then because you messed that one up the following rules are more specific where you again use the wrong format.

    Code:
    .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:

    Code:
    .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;
     }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •