Grow your CSS skills. Land your dream job.

Superfish

  • # October 4, 2012 at 6:01 pm

    The problem:
    [http://themeforward.com/demo2/?cat=114](http://themeforward.com/demo2/?cat=114 “http://themeforward.com/demo2/?cat=114″)

    I’m hoping somebody may be able to help me with my Superfish menu. When I hover over a link and place my mouse in the sub-menu, the parent link does not maintain its hover color (in this case, white).

    For example, if I navigate to “Templates” and place my mouse on the “Page” link in the sub-menu, the word “Templates” does not maintain its on hover color of white.

    My stylesheet:
    [http://themeforward.com/demo2/wp-content/themes/Tutles/superfish.css](http://themeforward.com/demo2/wp-content/themes/Tutles/superfish.css “http://themeforward.com/demo2/wp-content/themes/Tutles/superfish.css”)

    # October 5, 2012 at 7:45 am

    Hi lucaswynne!

    The `A` doesn’t contain the submenu, only the parent `LI`. So this makes it difficult, if not impossible, to style a submenu’s parent LI’s content. Since Superfish uses jQuery and applys a `sfHover` class to the parent LI, just use that. Users that have javascript disabled won’t see the hover color stay white, but oh well.

    Anyway, add this selector `.sub-menu li.sfHover > a` to the hovered portion.

    I ended up removing all of the `!important` flags because they aren’t needed when you reduce the specificity of the previous selectors. Here is the modified skin section that I ended up with:

    /*** DEMO SKIN ***/
    .sf-menu { clear:both }

    .sf-menu a {
    color:#FFF;
    font-size:14px;
    font-weight:bold;
    padding:10px 15px;
    }
    .sf-menu a, .sf-menu a:visited { }

    .sf-menu .current-post-ancestor a, .sf-menu .current-menu parent a, .sf-menu .current-page-ancestor a, .sf-menu .current-category-ancestor a, .sf-menu .active_category a, .sf-menu .current-menu-item a {
    background:#34373D;
    }

    .sf-menu li {
    display:inline;
    float:left;
    }
    .sf-menu li li { color:#FFF; }

    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li:hover a {
    background:#3C4751;
    }

    ul .sub-menu { z-index:1000; }

    .sub-menu a {
    background:#34373D;
    color:#868E98;
    }
    ul li .sub-menu a:hover, ul li .sub-menu .current-menu-item a, ul li .sub-menu .current-menu-item a:hover, .sub-menu li.sfHover > a {
    color:#FFF;
    background:#34373D;
    }

    # March 5, 2013 at 5:35 pm

    None of my menus have a “sub-menu” class. How do I find the version I’m running?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".