Menu vertical 01:
Este é um exemplo de menu vertical com fundo transparente e imagem no fundo.


Pegue estes códigos e cole no (Style css do seu html ou do seu wordpress):
<style> .navi {width:100%; font-size:09px; border: 1px solid #FF80C0; border-top-width:1px; border-bottom-width:1px;} .navi ul {margin:0; padding:0; list-style:none;} .navi li {margin:0;border-top:1px solid #FF80C0;} .navi a {display:block; width:100%; padding:1px 0px 1px 8px; font-weight:none; text-decoration:none; font-family: tahoma; font-size:10px; letter-spacing:0px; font-weight:normal; text-align:left;} .navi li a:link {color:#000000; text-decoration:none; background-color:"TRANSPARENT"} .navi li a:visited {color:#FFFFC4; letter-spacing:0px; letter-spacing:0px; background-color:"TRANSPARENT";} .navi li a:active {color:#FF80C0; letter-spacing:0px; letter-spacing:0px; background-color:"TRANSPARENT";} .navi li a:hover {color:#FF80C0; background-color:"TRANSPARENT"; background-image: url('endereço%20da%20imagem%20aqui%21%21%21%21.html'); letter-spacing:0px;font-weight:bold; text-align:right} } </style>
Estes 2º códigos você vai colocar onde quer que o menu apareça:
<div class="navi" style="width: 160px; height: 52px">
<div class="navi"> <ul> <li><a href="http://www.seulinkaqui.com.br/">HOME</a></li> <li><a href="http://www.seulinkaqui.com.br/">HOME</a></li> <li><a href="http://www.seulinkaqui.com.br/">HOME</a></li> <li><a href="http://www.seulinkaqui.com.br/">HOME</a></li> </ul> </div>


Pegue estes códigos e cole no (Style css do seu html ou de wordpress):
<style> .buttons1 a {color: #804000; background-color: transparent; padding: 2px; padding-left: 7px; display: block; border-left: 13px solid #BC7878; letter-spacing: 1px; font: 9px Tahoma, sans-serif; font-weight: none; text-decoration: none; text-align: left; margin-top: 1px;} .buttons1 a:hover {border-left: 13px solid #FF8040; text-decoration: none; font-weight: none; color: #000000;} </style>
Pegue os códigos na caixinha e cole onde quer que o Menu apareça:
<div class="buttons1"> <a href="http://www.seulinkaqui.com.br/">Link 01</a> <a href="http://www.seulinkaqui.com.br/">Link 02</a> <a href="http://www.seulinkaqui.com.br/">Link 03</a> <a href="http://www.seulinkaqui.com.br/">Link 04</a> <a href="http://www.seulinkaqui.com.br/">Link 05</a> <ul /></div>

Esses códigos você cola no seu style css:

<style> .buttonscontainer {width:150px;} .buttons a {color: #000000; background-color: trasnparent; padding: 2px; padding-left: 3px; display: block; border-bottom: 1px dashed #808080; font: 13px arial, sans-serif; font-weight: bold; text-decoration: none; text-align: left;} .buttons a:hover {background-color: transparent; color: #FF4FA7; text-decoration: none;} </style>

Os códigdo abaixo onde quer que ele apareça:

<div class="buttonscontainer"> <div class="buttons"> <a href="#"target="post">Link 01</a> <a href="#" target=post>Link 02</a> <a href="#" target=post>Link 03</a> <a href="#" target=post>Link 04</a> <a href="#" target=post>Link 05</a> </div> </div>

Hosted by www.Geocities.ws