Hover Background Image & Color on Menu Item Not Showing

HTML & CSS
1

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?

2

You need to apply the unselected image to .moduletablenav .sf-menu a:link

Because you’ve put it on the <li>, when you :hover it is adding a background image to the <a>, but it doesn’t know it needs to take the background image off the <li>. Putting it on the <a> from the start stops this happening.

3

Okay, I’ve managed to have fixed that part, but now when it comes to the ‘current’ state, the item does not stay white. It has the background color (which is what I want), but the image is not ‘white’ nor is the link.

4

That’s probably because you’ve got a mix and mess and styles being applied to both the <li> and the <a> here:

.moduletablenav .sf-menu [COLOR="Green"]li[/COLOR]#current,
.moduletablenav .sf-menu [COLOR="Green"]li[/COLOR]:hover,
.moduletablenav .sf-menu [COLOR="green"]li[/COLOR].sfHover,
.moduletablenav .sf-menu [COLOR="Purple"]a[/COLOR]:hover,
.moduletablenav .sf-menu [COLOR="purple"]a[/COLOR]:active

You need to stick to either apply everything to the <li> (which will cause problems in older versions of IE, which don’t recognise li:hover) or to the <a>.

(Do you really need both .moduletablenav and .sf-menu there? Unless you have something else with class="sf-menu" that has different styles, you can get rid of .moduletablenav from the declaration)

5

Thanks, guys! With your help I’ve managed to clean up the code and get it working correctly!

Thank you!