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