Olá, 
  
Esse tutorial foi baseado no scprit desenvolvido pelo ~Patybs, apenas criei um tutorial e modifiquei o código conforme minha preferência. 
  
CRIANDO O HTML: 
Bom primeiramente coloque a estrutura básica do html que é essa aqui: 
  
 
<html>
<head>
<title> Menu vertical </title>
</head>
<body>
</body>
</html>
Certo agora vamos colocar os itens do menu, serão apenas links a parte importante e mais complexa fica por conta do css, o código dos menus é esse aqui:
<html>
<head>
<title> Menu vertical </title>
</head>
<body>
<a class="menu"  href="">Oficina da net</a>
<a class="menu"  href="">Tutoriais clube</a>
<a class="menu"  href="">Capixabinha</a>
</body>
</html>
 
  
A parte do html está pronta vamos agora programar o css. 
  
A PARTE DO CSS: 
Vou por o css dentro do próprio html, caso queiram criar um documento externo fiquem a vontade. O código de formatação do css é esse: 
  
 
<style>
a.menu{
width: 150;
background-color: #efefef;
display:block;
padding-left:1px;
border-left:10px solid #333333;
border-bottom:1px solid #BBBBBB;
font-weight:bold;
color:#666666;
line-height:175%; }
a.menu:hover{
background-color: #e3eeff;
display:block;
padding-left:0;
font-weight:bold;
border-left:10px solid #333333;
border-bottom:1px solid #006699;
color:#006699; }
</style>
 
  
Coloque os scprits do css dentro das tags <style> ou crie um documento externo. 
  
EXPLICANDO O CÓDIGO: 
  
a.menu 
Define que o objecto a ser formatado é o menu. 
  
width: 150; 
Define a largura do menu 
  
background-color: #efefef; 
Define que a cor do fundo do item menu será #efefef 
 
padding-left:1px; 
Define a quantidade de pixels que terá da margem esquerda. 
  
border-left:10px solid #333333; 
Tal código cria uma borda do lado esquerdo de um objeto (no caso o menu), define a espessura, que sua forma é sólida e sua cor (hexadecimal). 
  
border-bottom:1px solid #BBBBBB; 
Como no código a cima ele criará uma borda porém na parte de baixo do objeto, define sua espessura, sua forma e sua cor (também hexadecimal). 
  
font-weight:bold; 
Diz que o texto será formatado em negrito. 
  
color:#666666; 
Define a cor do fundo do menu. 
  
line-height:175%; } 
Define a grossura do fundo, pode ser usado pixels e pontos também. 
  
a.menu:hover 
Define que quando o objeto menu for selecionado tal formatação será ativo (essa opção é possível graças ao hover). 
  
background-color: #e3eeff; 
Define que a cor do objeto selecionado será #e3eeff (coloque uma cor diferente da selecionada inicialmente para obter o resultado esperado). 
  
display:block; 
Define a posição em blocos. 
  
padding-left:0; 
Define que não existira padding-esquerdo (eu resetei essa opção coloque 10 e veja o que acontece). 
  
font-weight:bold; 
Essa opção já foi explicada, define o texto como negrito. 
  
border-left:10px solid #333333; 
Define que a borda lateral terá 10pixels, será sólida e terá a cor #333333 (mude e veja o que acontece). 
  
border-bottom:1px solid #006699; 
Aqui diz o que ira acontecer com a borda inferior quando o objecto for selecionado. 
  
color:#006699; 
Muda a cor do fundo para #006699 quando o objeto for selecionado. 
  
  
Bom pessoal, não posso colocar um exemplo para vocês clicar em porém observem como ficara o menu. 
  
MENU NÃO SELECIONADO: 
 
  
MENU SELECIONADO: