Menu estilo UOL e Terra

[Fabio_Lazaro 0]

Olá pessoal...Fiz o menu horizontal que o grande amigo Gio! me indicou... Andei olhando no fórum e nenhum menu vertical me serviu bem...Gostaria de saber como faço o menu vertical no estilo do UOL e Terra. Obrigado a todos!

[Poe 0]

Trabalhe com a propriedade INLINE para seus As dentro dos LIs e FLOAT para fazê-los deslizar. Daí você dá um tamanho fixo (WIDTH) para seus LIs e tudo se acerta.

 

Os efeitos você vai conseguindo somando propriedades todas.

 

Exemplo prático:

 

<ul>
<li><a href="1">teste menu</a></li>
<li><a href="2">teste menu 02</a></li>
</ul>

 

* {padding: 0;margin: 0;}ul {width: 300px;display: inline;}li {width: 150px;display: block;float: left;}ul li a {width: 150px;display: block;padding: 5px;float: left;}ul li a:link, ul li a:visited {color: #ffffff;background: #4c4c4c;}ul li a:hover {color: #ffffff;background: #000000;}

É isso aí!

 

P.S.: Contando o segredo dos menus vertical e horizontal: você só precisa aprender a mexer com posicionamento e entender como cada tag HTML se porta, daí você customiza para fazer ficar do jeito que você quer que elas fiquem. ;) Tendo isso em mente, tudo fica mais fácil!

[Fabio_Lazaro 0]

Obrigadão Poe. Fiz o menu hoje pela manhã ajustando tamanhos e cores e ficou muito legal.

 

Não entendo muito dos comandos , pois estou iniciando no CSS, mas já estou evoluindo.

 

Sua dica foi de grande ajuda.

 

Abraços []'s

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif