Having trouble creating a sliding menu with jQuery. The issue is that the hover css rule applied to the main navigation also affects its siblings, even though separate css rules were set for them.
I want the siblings to only have white text without a hover image.
The current code is messy as I've tried various properties to no avail.
Here's 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;
}