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.

LINK: http://themeforward.com/demo2

Checkout my menu. Hover over Features > Shortcodes > Typography. Notice how when you put your mouse over typography the background of Shortcodes turns to the darker red? How do I get the background to turn to the darker gray (#EEE) instead while on the third level of the menu without changing the parent menu link colors (Home, Templates, Features, Portfolio, Blog)?

Here is the part of my CSS creating this:

/*** DEMO SKIN ***/
.sf-menu {
    float:          left;
    z-index: 900
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #FFF;
    padding:        10px;
    text-decoration:none
}
.sf-menu li {
    margin-right:35px;
    z-index: 900
}
.sf-menu li li {
    z-index: 900;
    background:#FAFAFA
}
.sf-menu li li li {
    background:     #FAFAFA;
    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 {
    outline:        0;
    background: #AF1D21
}

.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:#1a1a1a }


ul .sub-menu { }
ul li .sub-menu a { color:#262626!important }
ul li .sub-menu a:hover { background:#EEE!important }
share|improve this question
    
Can you please copy your problem HTML into this question. Linking to your site makes it so that people won't be able to get value out of reading this questing in the future after your site changes. Remember, WordPress Answers is here to benefit future readers with similar questions as well as to benefit those asking the questions. –  MikeSchinkel Sep 16 '11 at 3:32

1 Answer 1

up vote 1 down vote accepted

This should be on stackoverflow.

If I understand correctly what you want, you need to change:

.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;
    background: #AF1D21
}

with:

.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;
    background: #AF1D21
}
share|improve this answer
    
That helped part of the problem. But when I hover over Features > Shortcodes > Typography and keep my mouse on typography the "shortcodes" parent should have a background color of #EEE while my mouse is on Typography... to show it is the parent. –  AndrettiMilas Sep 16 '11 at 2:52
    
then insert both css blocks from above, and in the first one make the background #eee... –  onetrickpony Sep 16 '11 at 2:55
    
Thank you. I didn't even realize > was usable in CSS. Will have to look into that. –  AndrettiMilas Sep 16 '11 at 3:15

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.