I have this menu:
<ul class="menu sf-menu sf-vertical">
<li id="current" class="first-child active item10">
<a href="/"><span>Home</span></a></li>
<li class="item1"><a href="/"><span>About</span></a></li>
<li class="item5"><a href="/"><span>President's Message</span></a></li>
<li class="item6"><a href="/"><span>How We Help</span></a></li></ul>
Each item is a link with a background image of dot on the left of it. Anytime a user hover overs it, the link color should turn white and the background image should change as well. The hover color changes but the background falls directly within the text. So then there’s two dots displaying instead of just the one image changing.
On top of that, the ‘current’ state should be the menu item in color: FFF with the background dot image as I have written in the CSS, but it’s not. The text stays 2c2c2c as well as the dot in it’s original state.
.moduletablenav .sf-menu {
font-size: 11px;
margin: 10px 18px;
padding: 0px;
list-style-type: none;
width: 80%;
}
.moduletablenav .sf-menu li {
line-height: 25px;
padding-left: 15px;
display: block;
background: url(../images/lm_unselected_item.png) no-repeat 2% 50%;
text-decoration: none;
border: none;
}
.moduletablenav .sf-menu li a {
display: block;
color: #2c2c2c;
cursor: pointer;
text-decoration: none;
}
.moduletablenav .sf-menu li#current,
.moduletablenav .sf-menu li:hover,
.moduletablenav .sf-menu li.sfHover,
.moduletablenav .sf-menu a:hover,
.moduletablenav .sf-menu a:active {
color: #FFF;
list-style:none;
background: #3d3f57 url(../images/lm_hover_item.png) no-repeat 2% 50%;
}
Where did I go wrong?