Simple CSS Vertical Menu with Images

Firstly to clarify the image is only for a background hover over/hover out effect, not for the text of the menu item, therefore only 2 images are required. I have attached them to this posting.

The menu is vertical and quite basic, I will use the same style for Vertical Css Menu with Multiple Submenus. I'll also add a submenu to this one - Simple Css Menu with Submenu.

First the css: Make sure to set the list style to none, and then the ensure the li element's display is set to block.

#vertmenu {
font-size:13px;
width: 160px;
padding: 0px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#vertmenu ul li {
margin: 0px;
padding: 0px;
}

#vertmenu ul li a {
display: block;
padding: 3px 0px 2px 20px;
text-decoration: none;
color: #3c444f;
width:140px;
font-weight:bold;
background:url(../images/menu_background_off.jpg) no-repeat;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #ffffff;
background:url(../images/menu_background_on.jpg) no-repeat;
}

Here is the html
<div style="clear:both;width:160px;background:#e9ebef;height:160px;">
<div id="vertmenu">
<ul>
<li><a href="">Home</a></li> </li>
<li><a href="">About</a></li>
<li><a href="">Events</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Site Map</a></li>
</ul>
</div>
</div>