CSS下拉菜單，清除第一個lvl懸停

我試圖在我的網站上風格的菜單，但我堅持着色和懸停效果。CSS下拉菜單，清除第一個lvl懸停

現在看起來如下（/用戶光標原來的位置，當我把截圖）：

我需要改變的是：

當我將鼠標懸停2級項目，第一級變成「默認」（沒有懸停效果）

我的這個菜單的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; 
}

來源

2013-08-02 pablo

我不確定，如果只有css可能。由於您正在顯示#nav ul li:hover > ul的第二級別，並且您正在突出顯示第一級和#nav ul li:hover，它們都在二級懸停（並且在CSS中沒有父級調用）。

這是很容易的，雖然使用jQuery：

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

入住這裏：

來源

2013-08-02 10:08:10

CSS下拉菜單，清除第一個lvl懸停

回答

相關問題