Tres menus verticales hechos con CSS

Experimentando con CSS realice 3 sencillos menús.

Espero y te sean de utilidad.
Ejemplo 1.

<style type="text/css">
#menuvertical
{
width: 12em; /* Ancho del menú */
font-family: Verdana; /* Tipo de letra */
text-align: center; /* Alineación de títulos */
}
#menuvertical ul
{
margin: 0;
padding: 0;
}
#menuvertical li
{
border-bottom: 2px inset #FFFFFF; /* Borde entre los enlaces */
}
#menuvertical li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #FF0000; /* Borde izquierdo del menú */
background-color: #008000; /* Color del menu */
color: #FFFFFF; /* Color de títulos */
text-decoration: none;
width: 100%;
}
#menuvertical li a:hover
{
border-left: 20px double #FF0000; /* Borde izquierdo hover del menú */
background-color: #009900; /* Color hover del menu */
color: #FFFFFF; /* Color hover de títulos */
}
</style>

<div id="menuvertical">
<ul id="menuvertical">
<li><a href="#">Enlace 0</a></li>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div>

<style type="text/css">
#menuvertical
{
width: 12em;
font-family: Verdana;
text-align: center;
}
#menuvertical ul
{
margin: 0;
padding: 0;
}
#menuvertical li
{
border-bottom: 1px inset #FFFFFF;
}
#menuvertical li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #FF8000;
border-right: 10px solid #FF8000;
border-bottom: 1px inset #FF8000;
background-color: #008000;
color: #FFFFFF;
text-decoration: none;
width: 100%;
}
#menuvertical li a:hover
{
border-left: 20px solid #FF8000;
border-right: 20px solid #FF8000;
background-color: #009900;
color: #FFFFFF;
}
</style>

<style type="text/css">
#menuvertical
{
width: 12em;
font-family: Verdana;
text-align: center;
}
#menuvertical ul
{
margin: 0;
padding: 0;
}
#menuvertical li
{
border-bottom: 0px inset #FFFFFF;
}
#menuvertical li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #FFCC00;
border-top: 10px double #FFCC00;
background-color: #008000;
color: #FFFFFF;
text-decoration: none;
width: 100%;
}
#menuvertical li a:hover
{
border-left: 20px double #FFCC00;
background-color: #009900;
color: #FFFFFF;
}
</style>