I'm having trouble changing the color of the active button pressed to "color:white;"... Here is the link to the jsfiddle: http://jsfiddle.net/wLXBR/
Apologies for the clutter in the file, my css is located at the bottom of the CSS box (Foundation code first).
In the jsfiddle, when you press a button that has a sub-menu, it turns green. I want the text in the green box to turn white while it's active just like it becomes green. I've tried everything (or so I thought)... Any suggestions?
EDIT: Didn't realize code needed to be included...
CSS:
/* Menu styling */
.side-nav {
padding: 0px;
}
.side-nav > li {
border-bottom: 1px solid #393939;
margin: 0px;
}
.side-nav > li > a {
border-bottom: 1px solid #181818;
padding: 10px;
color: #a7a7a7;
font-size: 13px;
}
.side-nav > li > a:hover {
color: #eaeaea;
}
.is-sub {
background: #2d2d2d;
margin: 0px;
display: none;
}
.is-sub > li {
background: #2d2d2d;
margin: 0px;
}
.is-sub > li a {
padding: 10px;
font-size: 12px;
color: #a7a7a7;
}
.has-sub.active {
background: #48AC40;
}
Javascript
jQuery(document).ready(function($) {
$('.has-sub').click(function() {
$(this).toggleClass("active");
$(this).children('.is-sub').slideToggle('slow');
return false;
});
});
HTML:
<ul class="side-nav">
<li>
<a href="#">Dashboard</a>
</li>
<li class="has-sub">
<a href="#" class="">Posts</a>
<ul class="is-sub">
<li>
<a href="#">Add a new Post</a>
</li>
<li>
<a href="#">Edit Posts</a>
</li>
</ul>
</li>
<li class="has-sub">
<a href="#" class="main">Manage</a>
<ul class="is-sub">
<li>
<a href="#">Categories</a>
</li>
<li>
<a href="#">Pages</a>
</li>
<li>
<a href="#">Users</a>
</li>
</ul>
</li>
<li>
<a href="#">Logout</a>
</li>
</ul>