将鼠标悬停在子菜单上时保持 CSS 菜单父项处于活动状态

Question

我有这个带有子项的 CSS 菜单，当我将鼠标悬停在子项上时，如何保持菜单项处于活动状态（具有不同的背景颜色）？

当前 CSS 代码：

#nav {
    background-color:#F36F25;
    margin:14px 0 0 0;
    width: 100%;
    height:35px;
    left:0;
}
#nav>li {
    float:left;
    list-style:none;
}
#nav li:hover ul {
    position:absolute;
    display:block;
}
#nav li a {
    display: inline-block;
    padding: 8px;
    margin:0;
    background: #F36F25;
    text-decoration: none;
    color: #FFFFFF;
    border-right:1px solid #F36F25;
}
#nav li a:hover, #nav li a.active {
    background: #666666;
    cursor:pointer;
}
#nav li ul {
    position:absolute;
    display: none;
    list-style:none;
    margin:0;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background-color: #F36F25;
    color:#FFFFFF;
    border:1px solid #F36F25;
    width:145px;
}
#nav li ul li a:hover {
    background-color: #666666;
    border:1px solid #f36f25;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

这里也是一个完整的代码：http://jsfiddle.net/dumJd/

Answer 1

在第 25 行尝试此代码：

#nav li:hover > a, #nav li a.active {
  background: #666666;
  cursor:pointer;
}