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

[lucaswynne]

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

}

[lucaswynne]

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

}

[Author]

Posts