css - CSS 下拉菜单，清除 1st lvl 悬停

Question

我正在尝试在我的网站上设置菜单样式，但我遇到了着色和悬停效果。

现在看起来如下（/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;
}

Answer 1

我不确定，如果只有 css 就可以了。当您使用 显示第 2 级#nav ul li:hover > ul并使用 突出显示第 1 级时#nav ul li:hover，它们都在第 2 级 li hover 上触发（并且在 css 中没有父调用）。

虽然使用 jQuery 很容易：

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

在这里检查：http: //jsfiddle.net/balintbako/EruTP/