CSS下拉菜单，清除第一级悬停

我正在尝试在我的网站上设计菜单的样式，但我一直坚持使用颜色和悬停效果

现在看起来如下（/user是我截图时光标所在的位置）：

我需要改变的是：

• 当我悬停第二级物品时，第一级变成“默认”（无悬停效果）

此菜单的CSS是：

#nav {
text-align: center;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 1px;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
display: inline-table;
list-style: none outside none;
padding: 0 10px;
position: relative;
}
#nav ul:after {
clear: both;
content: "";
display: block;
}
#nav ul li {
float: left;
background: none repeat scroll 0 0 #F5F5F5;
margin-right: 3px;
}
#nav ul li:hover {
background: none repeat scroll 0 0 #E32D40;
}
#nav ul li a {
color: #757575;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul li a:hover {
color: #FFFFFF;
}
#nav ul ul {
border-radius: 0 0 0 0;
padding: 0;
position: absolute;
top: 100%;
}
#nav ul ul li {
margin-top: 3px;
float: none;
position: relative;
color: #757575;
}
#nav ul ul li a {
color: #757575;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul ul li a:hover {
}
#nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}

---

我不确定，如果它是唯一的css可能。当您用

#nav ul li:hover>ul

显示第二层时，您用

#nav ul li:hover

突出显示第1层，这两个都在第二层li hover上触发（css中没有父调用）

使用jQuery非常简单：

$('#nav > ul > li > ul > li').hover(function () {
    $(this).parents('li').first().css('background', 'none');
});

请点击此处：