Menu vertical

Views:
<center>
<style>
#button {
width: 12em;
border-right: 1px solid #000; /* cor da borda esquerda*/
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; /* tipo da fonte */
background-color: #90bade; /* cor de fundo externo*/
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade; /* cor da borda inferior */
margin: 0;
list-style: none;
list-style-image: none;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7; /* cor da borda direita */
border-right: 10px solid #508fc4; /* cor da borda esquerda */
background-color: #2175bc; /* cor de fundo interno */
color: #fff; /*cor da fonte */
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1; /* cor da borda direita com efeito hover */
border-right: 10px solid #5ba3e0; /* cor da borda esquerda com efeito hover */
background-color: #2586d7; /* cor de fundo em estado hover */
color: #fff; /* cor da fonte em estado hover */
}
</style>
<div id="button">
  <ul>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
  </ul>
</div></center>
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage