Superfish

[lucaswynne]

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

[Mottie]

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

[maurymarkowitz]

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

[Author]

Posts