Menu Barrinhas Vertical Hover [002]

Olá bunnie's, como vão todos vocês? Eu vou bem, mas vamos ao que interessa, certo? Aqui vai um menu simples e ótimo para usar como base. Eu o encontrei no blog Sweet Poison. Se utilizarem por favor credite o blog, esta bem? Grata! Caso queira ver como ele é basta clicar no botão abaixo para ver o efeito.

Brevia do efeito

1. Em seu HTML procure por, ]]></b:skin> acima dessa tag, coloque:

Códigos

#navigation {
float:left; /* Alinhamento */
width:93px; /* Largura das caixinhas */
}

#navigation a:hover {
-webkit-transition:0.3s linear; /* Efeito fade */
}

.nav a {
display:block;
background-color:#F5F5F5; /* Cor do background */
font-size:9px; /* Tamanho da fonte */
font-family:Georgia; /* Fonte */
text-transform:lowercase; /* Estilo do texto. Lowercase=minúsculas e Uppercase=maíusculas */
color:#C0BBBE; /* Cor do texto */
text-align:right;  /* Alinhamento do texto */
padding:3px; /* Margem interna */
letter-spacing:1px; /* Espaçamento das letras */
border-right:#87CEFA 2px solid; /* Borda lateral normal */
border-left:#fff 5px solid; /* Borda, representa o espaço entre os links */
cursor:crosshair; /* Cursor */
opacity:0.9; /* Opacidade */
}

.nav a:hover {
opacity:0.7; /* Opacidade */
border-right:10px solid #DCDCDC; /* Borda lateral hover */
}

2. Agora você adiciona um gadget de HTML/Javascript e dentro coloque esse codigo:

Códigos

<div id="navigation"><div class="nav">

<a href="URL 1">LINK 1</a>&nbsp;

<a href="URL 2">LINK 2</a>&nbsp;

<a href="URL 3">LINK 3</a></div></div><div id="navigation"><div class="nav">

<a href="URL 4">LINK 4</a>&nbsp;

<a href="URL 5">LINK 5</a>&nbsp;

<a href="URL 6">LINK 6</a></div></div><div id="navigation"><div class="nav">

<a href="URL 7">LINK 7</a>&nbsp;

<a href="URL 8">LINK 8</a>&nbsp;

<a href="URL 9">LINK9</a></div></div>

</div>