Passe o mouse sobre os links
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Vertical</title>
<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #003399;
background:#FADE8B;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #A4A0F5;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#5E0F50;
border-left:10px solid #EEC591;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #FFE4B5;
color:#DAA520;
border-left:10px solid #FFD39B;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutoriais CSS</a></li>
<li><a href="#">Normas XHTML do W3C</a></li>
<li><a href="#">Posicionamento CSS</a></li>
<li><a href="#">Contato</a></li>
</ul>
</body>
</html>
ul#menu {
width:150px;
background:#363636;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #9C9C9C;
border-right:5px solid #828282;
}
ul#menu li a:link, ul#menu1 li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFA500;
border-left:8px solid #696969;
padding-left:5px;
}
ul#menu li a:hover {
background-color:#696969;
color:#DAA520;
border-left:8px solid #828282;
}