链接：http://themeforward.com/demo2
签出我的菜单。将鼠标悬停在“功能”>“短代码”>“排版”上。请注意，当您将鼠标放在排版上时，短代码的背景是如何变为深红色的？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)?
以下是我的CSS中创建以下内容的部分：
/*** 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 }
最合适的回答,由SO网友:onetrickpony 整理而成
这应该在stackoverflow上。
如果我正确理解您的需求，您需要更改：
.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 > 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
}
