﻿<div id="list-menu">
</div>

#list-menu {
width: 132px;
/* this width value is also effected by
the padding we will later set on the links. */
}

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>

 #list-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
} 

font-family: verdana, arial, sanf-serif;
font-size: 12px; 

#list-menu li {
margin: 2px 0 0;
} 

#list-menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none; /*lets remove the link underlines*/
} 
#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
} 

#list-menu a:hover {
border: 1px solid #000000;
background: #333333 url(images/background1.gif);
color: #ffffff;
}
