I'm currently developing a CSS dropdown menu and I want to be able to highlight the selected item by adding an "active" class to it. However, I'm facing an issue where the background color changes but the text color does not.
Here is a demo: http://jsfiddle.net/tMND4/4/
HTML:
<ul class="dropdown">
<li>
<a href="#">Nice test items</a>
<ul class="submenu">
<li><a href="#">Sonic Screwdriver</a></li>
<li class="active"><a href="#">TARDIS</a></li>
<li><a href="#">Long Scarf</a></li>
</ul>
</li>
</ul>
CSS:
body{
padding:10px;
}
.dropdown > li{
width:200px; /*or anything you want!*/
color:#333;
text-decoration:none;
padding:2px; /*all things wont stick to the side */
}
.dropdown li a{
display:block;
color:#666;
text-decoration:none;
padding:5px; /*line it up with sublinks */
}
.dropdown li .submenu{
display:none; /*hide submenu*/
}
/* child selector to prevent style propagation*/
.dropdown > li:hover{
border:1px solid #666;
}
/* child selector to prevent style propagation*/
.dropdown > li:hover a {
padding: 4px; /*reduced padding to compensate for border*/
}
.dropdown li:hover .submenu{
display:block; /*display submenu*/
}
.dropdown li:hover .submenu a{
display:block;
padding:5px; /*line it up with links */
}
.dropdown li:hover .submenu a:hover{
background: #DDD;
}
.active{
background:#666;
color:#FFF;
}