jQuery，CSS和兄弟姐妹選擇器問題

Question

我試圖做一個與jQuery的滑動菜單，我的問題是懸停CSS主規則（懸停圖像）規則也適用於我的兄弟姐妹，即使我做了自己的css規則。

我需要兄弟姐妹只是帶有#FFF的文本而沒有懸停圖像。

該代碼現在非常糟糕，因爲我已經嘗試了所有的屬性，使其工作，沒有成功。

這裏是我的jQuery代碼：

$(document).ready(function(){ 
$("#main-nav li a.main-link").click(function(){ 
    $("#main-nav li a.close").fadeIn(); 
    $("#main-nav li a.main-link").removeClass("active");             
    $(this).addClass("active");          
    $("#sub-link-bar").animate({ 
     height: "40px"      
    }); 
    $(".sub-links").hide(); 
    $(this).siblings(".sub-links").fadeIn(); 
}); 
$("#main-nav li a.close").click(function(){ 
    $("#main-nav li a.main-link").removeClass("active");                      
    $(".sub-links").fadeOut(); 
    $("#sub-link-bar").animate({ 
     height: "1px"      
    });  
    $("#main-nav li a.close").fadeOut(); 
}); 

HTML

<div id="sub-link-bar"></div> 
<div id="main-handle"> 
    <ul id="main-nav"> 
    <li><a class="main-link" href="#">Main Link</a> 
    <ul class="sub-links"> 
    <li><a href="#" title="test"> Sub Link</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 

我的CSS

#main-nav { 
margin: 0px 0px 0px 0px; 
padding-top: 10px; 
padding-left: 0px; 
background-image: url(../images/menu.png); 
background-repeat: repeat-x; 
height: 41px; 
width: 100%; 
list-style:none; 
color:#306295; 
} 

#main-handle { 
width: 100%; 
float: right; 
margin-top: -1px; 
} 
#main-nav li { 
display: inline; 
list-style: none; 
} 
#main-nav li a { 
font-size: 12px; 
text-decoration: none; 
font-family:Verdana, Geneva, sans-serif; 
font-weight:bold; 
outline: 0; 
height: 41px; 
color:#306295; 
text-align: left; 
padding:13px 16px 13px 16px; 
} 
#main-nav li a:hover, #main-nav li a.active { 
background-image: url(../images/bg-main-nav-hover.jpg); 
text-align: left; 
padding:13px 16px 13px 16px; 
color:#FFF; 
height: 41px; 
background-position: center; 
} 
#sub-link-bar { 
background: #476192; 
background-image: url(../images/sub-bar-bg.png); 
background-repeat: repeat-x; 
min-height: 1px; 
border-bottom: #645546 1px solid; 
} 
.sub-links { 
display:none; 
position: absolute; 
width: 100%; 
top: 113px; 
text-align: left; 
left: -40px; 
} 
.sub-links ul li a{ 
color:#FFF; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 12px; 
font-weight: normal; 
background-image: none; 
} 
.sub-links li a:hover{ 
color: #e0e0e0; 
text-decoration:none; 
background-image: none; 
} 
#main-nav li a.close{ 
display: none; 
position: absolute; 
color:#fff; 
} 
#main-nav li a.close:hover{ 
background: #900; 
} 

Answer 1

如果你希望把規則只適用於直接孩子使用這CSS：

.parent > .child 

或代碼：

#mainNav li > a:hover { 

}