jQuery, CSS & siblings selector problem

I'm trying to make a sliding menu with jQuery, my problem is that the hover css rule from the main nav (a hover image) also apply to my siblings, even tho i made own css rules for them.

I need the siblings to be only text with #FFF without a hover image.

The code is pretty crappy right now because i have tried allot of properties to make it work, without success.

Here is my jQuery code:

$(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>

And my 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;
}

If you want to apply a rule only to a direct child use this in CSS:

.parent > .child

or in your code:

#mainNav li > a:hover {

}