Problem with the hover effect in css

check this simple code: http://jsfiddle.net/DECPY/ . As you can see when you hover the menu item a gray backgroud apear, but, no behind开发者_运维百科 the menu icon. How can i put the color backgroud behind the image when the mouse pass over?

This is an image that explains evrythink:

I edited your code a little. I moved home-ico class to a link. And changed appropriate styles. See it here.

You can do the folowing:

replace

div#vertmenu ul li.home-ico {...}

with:

.home-ico img {
    margin: 0 5px -2px 0;
}

And change yor html like this:

<div id="vertmenu"> 
    <ul>
        <li class="home-ico">
            <a href="#" tabindex="1">
                <img border="0" src="http://www.benyboatti.com/images/home-icon.png"/>
                Home
            </a>
        </li>
    </ul>
</div>

Note: it works even in IE6. jsFiddle