Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Take a look at: http://www.themeforward.com/demo2. When I hover over a menu item with a sub-menu, like 'Templates', and mouse over sub-menu items the background color stays the same as it should... but the hover color of the text does not.

How do I make the font color remain the same while scrolling through the sub-menu? I've Googled all over for this and can't find a solution. The Superfish site does not provide sample CSS for this issue and provides no answer on the matter. I usually wouldn't post this as a question here since it is a CSS question, but I believe it may also be related to a WordPress' current category feature.

The background color is achieved with this CSS, but the font color is not behaving in the same manner:

.sf-menu > li:hover, .sf-menu > li.sfHover,
.sf-menu > li a:focus, .sf-menu > li a:hover, .sf-menu > li a:active {
    background:     #CFDEFF;
    color:          #222;
    outline:        0;
}

Below you will find the entire CSS:

.sf-menu {
    z-index: 900;
    font-size:13px
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    padding: 5px 10px;
    color:          #FFF;
    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 {
    background:     #CFDEFF;
    color:          #222;
    outline:        0;
}

.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
}
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

Try changing the style of:

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    padding: 5px 10px;
    color:          #FFF;
    text-decoration:none
}

The white text colour appears to be coming from there.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.