CSS dropdown menu, clear 1st lvl hover - css

Question

I'm trying to style menu on my website but I'm stuck with coloring and hover effects.
It looks now as below (/user is where cursor was when I took screenshot):
Screenshot
What I need to change is:
when I hover 2nd level item, 1st level becomes "default" (without hover effect)
My CSS for this menu is:
#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

I'm not sure, if it is possible with only css. As you are displaying the 2nd level with #nav ul li:hover > ul and you are highlighting the 1st with #nav ul li:hover, which are both firing on 2nd level li hover (and there is no parent call in css).
It is quite easy though with jQuery:
$('#nav > ul > li > ul > li').hover(function () {
$(this).parents('li').first().css('background', 'none');
});
Check here: http://jsfiddle.net/balintbako/EruTP/