Menu Horizontal

Atendendo ao pedido dos meus fas , estou colocando um Menu Horizontal, pra vocês colocarem no blog!
Você pode mudar a cor e as medidas! Tá tudo bem explicadinho, espero que gostem!





#menuhori {
list-style: none;
float: left; /* NÃO MEXA AQUI */
height: 40px; /* ALTURA DO MENU */
width: 980px; /* LARGURA DO ESPAÇO EM Q
UE VOCÊ VAI COLOCAR ELE */
padding-left:15px;
margin-top: 22px;
}

#menuhori ul {
padding: 0px;
margin: 0px;
float: left;

width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 20px;
vertical-align:middle;
}
#
menuhori ul li {
display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#
menuhori ul li a {
display: block;
width: 131px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #D7AAFF; /* COR DA FONTE */
background-color: #F8F0FF; /* COR DO FUNDO */
border:1px solid #D7AAFF; /* COR DA BORDA */
vertical-align:middle;
}
#menuzinhoh ul li a:hover, #menu li.current a {
color: #B664FF; /* COR DA FONTE QUANDO PASSA O MOUSE */
background-color: #EAD2FF; /* COR DO FUNDO QUANDO PASSA O MOUSE */
text-decoration: none;
border:1px solid #B664FF; /* COR DA BORDA QUANDO PASSA O MOUSE */
}





Agora você cola esse código que se encontra na caixinha abaixo, onde você quer que seu menuzinho apareça:



Atenção!
Se você quiser colocar no modelo do novo blogger abaixo da imagem de topo digite ctrl + f e procure por ]]B:SKIN logo acima cole o primeiro código que eu passei, que tá no começo dessa postagem.:
Agora, ainda na caixinha que apareceu quando você apertou ctrl + f digite
CABEÇALHO logo abaixo cole o seguinte código::


Agora você cola esse código, onde você quer que seu menuzinho apareça:


No Final, seu menu ficará assim:


A parte mais clara é ele normal, e a parte mais escura é quando passar o mouse em cima!

Espero que tenham gostado!

Beijinhos;*



Nenhum comentário:

Postar um comentário