Css Tutoriais

Menu Horizontal

26 de May de 2008

Menu horizontal semelhante a esse:

01. Adicione ao seu css o código a seguir:

#menu {
list-style: none;
float: left;
height: 25px;
width: 465px;
padding-left:15px;
margin-top: 150px;
}
#menu ul {
padding: 0px;
margin: 0px;
float: left;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#menu ul li {
display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#menu ul li a {
display: block;
width: 61px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #FEC2E1;
background-color: #FFF1F9;
border:1px solid #FEC2E1;
vertical-align:middle;
}
#menu ul li a:hover, #menu li.current a {
color: #c0c0c0;
background-color: #f8f8f8 ;
text-decoration: none;
border:1px solid #c0c0c0;
}

O posicionamento do meu é feito em #menu.

2. Onde quer que o menu apareça, use:

<div id="menu">
<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>
</ul>
</div>

heart


Leia Também

Deixe seu comentário

13/12/2008 ・ 18:49

Só qeuria dizer que adorei esse tutorial sobre menu, dos vários que tentei esse foi o mais fácil que encontrei para utiçizar no meu blog. O seu site já está na minha seção de créditos!

26/02/2009 ・ 14:51

you inspire me :9:
Ayelen, from Argentina 🙂

22/03/2009 ・ 10:43

adoreei o tutorial :26:

12/04/2009 ・ 10:06

Adorei aqui ,e simplismente tava presisando de um menu pra organizar meu site^^
beijo boa páscoa! :9:

24/04/2009 ・ 19:21

Eu tô loca pra colocar esse menu no meu site, mas eu não estou conseguindo!
Eu coloquei o primeiro css entre o mas não funcionou, deu erro.
Estou fazendo algo errado?
O que devo fazer?
=]
Obrigada

25/04/2009 ・ 08:56

Com certeza, algo errado você está fazendo, mas não dá para saber exatamente o que é. O menu tem que ser editado, você tem que ajustar as medidas de acordo com seu layout.

10/04/2011 ・ 13:16

onde eu coloco o segundo codigo? nao entendi :24:

    10/04/2011 ・ 13:53

    “2. Onde quer que o menu apareça”

21/09/2011 ・ 16:02

Deu tudo certinho, menos o conteudo do menu ;/
E agora, como faz ? :24:

09/03/2016 ・ 13:44

A Onde eu coloco o primeiro codigo ?