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

Question

我想在我的网站上设置菜单样式，但我受困于着色和悬停效果。

现在看起来如下(/user 是我截屏时光标所在的位置):

Screenshot

我需要改变的是:

• 当我将第 2 级元素悬停时，第 1 级变为“默认”(没有悬停效果)

我的这个菜单的 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 是否可行。当您使用 #nav ul li:hover > ul 显示第 2 级时，您使用 #nav ul li:hover 突出显示第 1 级，它们都在第 2 级触发level li 悬停(css 中没有父级调用)。

虽然使用 jQuery 还是很容易的:

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

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