List menu with image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>17</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
font-weight: bold;
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu {
width: 200px;
border-style: none solid none solid;
border-color: #D0D0D0;
border-width: 1px;
margin: 10px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #777;
display: block;
background: url(menu-8/menu.gif);
padding: 8px 25px 0 10px;
text-align: right;
}
#menu li a:hover {
color: #fff;
background: url(menu-8/menu.gif) 0 -32px;
padding: 8px 25px 0 10px;
text-align: right;
}
#menu li a:active {
color: #fff;
background: url(menu-8/menu.gif) 0 -64px;
padding: 8px 25px 0 10px;
text-align: right;
}
</style>
</head>
<body>
<h1>Vertical CSS Navigation Menu</h1>
<hr />
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">CSS Layouts</a></li>
<li><a href="http://www.free-css.com/">CSS Books</a></li>
<li><a href="http://www.free-css.com/">CSS Menus</a></li>
<li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
<li><a href="http://www.free-css.com/">CSS Reference</a></li>
<li><a rel="nofollow" target="_blank" href="http://www.e-lusion.com/" title="E-lusion">E-lusion</a></li>
</ul>
</div>
</body>
</html>