Grow your CSS skills. Land your dream job.

Superfish and WordPress: Parent Hover Style When on Sub-menu?

  • # November 16, 2011 at 5:27 pm

    I’m using the superfish menu at http://themeforward.com/demo2/

    A good example of what I’d like to achieve can be found at http://designmoo.com/ Notice how the parent menu item “Resources” retains its hover styling when mousing over the submenu… I would like to achieve this with Superfish.

    Right now the parent menu item doesn’t retain it’s active styling when I go through the submenu, here is my css:

      /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .sf-menu {
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
    width: 100%
    }
    .sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
    float: left;
    position: relative;
    }
    .sf-menu a {
    display: block;
    position: relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 0;
    top: 2.5em; /* match top ul list item height */
    z-index: 99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 10em; /* match ul width */
    top: -1px;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }

    /*** DEMO SKIN ***/
    .sf-menu {
    z-index: 900;
    font-size:13px
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #FFF;
    padding: 5px 10px;
    text-decoration:none
    }
    .sf-menu li {
    margin:20px 0 0 20px;
    z-index: 900
    }
    .sf-menu li li {
    z-index: 900;
    margin:0;
    padding:0;
    background:#DDD;
    }
    .sf-menu li li li {
    background: #DDD;
    margin:0;
    z-index: 900
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    }
    .sf-menu > li:hover, .sf-menu > li.sfHover,
    .sf-menu > li a:focus, .sf-menu > li a:hover, .sf-menu > li a:active {
    outline: 0;
    color: #222
    }

    .sf-menu .current-post-ancestor a, .sf-menu .current-menu parent a, .sf-menu .current-page-ancestor a, .sf-menf .current-category-ancestor a, .sf-menu .active_category a, .sf-menu .current-menu-item a { color:#000 }

    ul .sub-menu { border:1px solid #DCDCDC }
    ul li .sub-menu a { color:#666!important; font-weight:normal; font-size:11px; padding:5px!important }
    .sf-menu > li li:hover, .sf-menu > li li.sfHover,
    .sf-menu > li li a:focus, .sf-menu > li li a:hover, .sf-menu > li li a:active {
    background: #EEE
    }
    # November 16, 2011 at 5:56 pm

    Solved it:

    .sf-menu > li:hover, .sf-menu > li.sfHover,
    .sf-menu > li a:focus, .sf-menu > li a:hover, .sf-menu > li a:active {
    outline: 0;
    color: #222
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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