www.flickr.com

MENU VERTICAL

Este menu é ótimo para colocar no seu blog. Ele é bem fácil de utilizar! Coloque o código abaixo entre as tags <style> e </style>. Modique também as cores.



ul { margin: 0; padding: 0; list-style: none; width: 100%; /* Width of Menu Items */ border-bottom: 0px solid #DDC084; } ul li { position: relative; } li ul { position: absolute; left: 99px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { border-left:0px solid #FCF8EF; border-right:0px solid #FCF8EF; border-top:0px solid #FCF8EF; display: block; text-decoration: none; color: #DDC084; /* IE6 Bug */ padding: 0px; border-bottom: 0px none; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #FEFBF4; background: #F5282D; cursor:crosshair} /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; }



Agora coloque este código aonde você quer que o menu fique:



<ul> <li><a href="seu link aqui1">NOME DO LINK1</a></li> <li><a href="seu link aqui2">NOME DO LINK2</a></li> <li><a href="seu link aqui3">NOME DO LINK3</a></li> </ul>



OBS: Este menu só funciona no Internet Explorer.



Tutorial por Nana - © Proibida cópia total ou parcial.