Conteudo

Criando um menu horizontal no blog

Aconselho sempre, antes de qualquer mudança no seu template, que você salve uma cópia do mesmo antes de tudo. E mais, nunca salve antes de visualizar o resultado, por que se não estiver bom, basta clicar em Limpar Edições.

1º Parte:

Coloque antes de ]]>

#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}

#navigation ul{
margin: 0 0 0;
padding: 0 0 0;}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}


#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}


Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template.

Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:

#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}

Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na página (0 auto 0)
Background  é o plano de fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que uma imagem se repeti horizontalmente.

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}


border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

Color: determinará a cor que dos links antes que se passe o cursor sobre eles.

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

Aqui se determina cor dos links e background quando se passa o cursor por cima do link.


2º Parte:

Para deixar o menu sob o cabeçalho, coloque abaixo de (HTML):

Este código: