Tutoriais  15/01/2006 

Menu Vertical

Modelo de menu vertical simples. Se você quiser pode variar o estilo mudando os atributos de borda, tamanho, cor, etc. Seu menu vai ficar assim:

01. Adicione ao seu css:

#nav ul {
padding: 0px;
margin: 0px;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#nav ul li {
display: block;
margin: 1px;
border:0px;
}
#nav ul li a {
display: block;
width: 150px;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
text-indent: 5px;
letter-spacing: 2px;
color: #FEC2E1;
background-color: #FFF1F9;
vertical-align:middle;
}
#nav ul li a:hover {
color: #c0c0c0;
background-color: #F8F8F8;
}

02. E no lugar em que você quer que apareça o menu coloque:

<div id="nav">
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
<li><a href="http://www.link4.com">Link 4</a></li>
</ul>
</div>

Não esqueça de trocar "link" pelo endereço do seu link.


Leia Também

Deixe seu comentário

17/08/2009 ・ 01:13

muito legal esse menu ^^

23/09/2009 ・ 17:33

esse codigo tá dando erro no meu lay :20:

    25/09/2009 ・ 17:23

    No seu caso, você tem que colocar dentro da tag style.

09/10/2009 ・ 14:40

Nossa amei !
deu uma linda diferença no meu blog… ♥

07/05/2010 ・ 10:50

não consegui colocar no meu blog..eu coloquei dentro da tag ‘style’ mas mesmo assim não aparece esse menu,só aparece os link normal !

23/08/2011 ・ 20:03

Não estou conseguindo colocar, pois não sei onde começa e termina isso de CSS no meu blog de testes.

29/03/2014 ・ 22:14

Nossa ajudou muito, eu achei que ficou lindo, mudei umas coisas, como a cor do background e o tamanho mas ficou ótimo!
Bjss