Menu Tabulado e em Queda
Controle por CSS

No menu abaixo os itens Produtos e Notícias apresentam os links em queda. As áreas onde vão listados os itens podem ou não ter o fundo colorido. Essa ordem de itens e fundo colorido do exemplo abaixo não tem que necessariamente acontecer no seu site. Manejando a pa´gina de estilos, cujo endereço encontra-se no código-fonte, você pode fazer várias combinações.

O script deste menu pode ser visto no código-fonte desta página e é como se segue.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" id="current">Produtos</a>
<ul>
<li><a href="#">Produto 1</a></li>
<li><a href="#">Produto 2</a></li>
<li><a href="#">Produto 3</a></li>
<li><a href="#">Produto 4</a></li>
<li><a href="#">Produto 5</a></li>
<li><a href="#">Produto 6</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
</li>
<li><a href="#">Galeria</a></li>
<li><a href="#" id="current">Clientes</a></li>
<li><a href="#">Promoções</a></li>
<li><a href="#" id="current">Notícias</a>
<ul>
<li><a href="#">Notícia 1</a></li>
<li><a href="#">Notícia 2</a></li>
<li><a href="#">Notícia 3</a></li>
<li><a href="#">Notícia 4</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</div>

<a href="http://www.otimizacao-sites-busca.com/criar-menus-css/queda-tabulado/" target="_blank" title="Menu em Queda Tabulado - CSS">Menu em Queda Tabulado</a>

Links relacionados:

Gerador de CSS

Menu Horizontal com Fundo Colorido

Menu Horizontal com Cobertura Colorida

Cor e Forma Predefinidos

Sub-menus em Queda em Barra Horizontal

Tonalidades Cinza/Azul - Sub-menus em Queda

Menu Multinível

Queda - Cores do Sol ao Nascer

Geradores de Menus - Vários Modelos

Ruy Miranda
Otimização de Sites