Menu Horizontal com Submenus em Queda em Barra Horizontal Controle por CSS

Nesse menu os links principais aparecem numa barra horizontal. Os links dos submenus aparecem numa barra horizontal inferior e em tonalidade diferente. Você pode modificar essas cores num editor de imagens simples, se tiver alguma habilidade para trabalhar com imagens. Mas se você desejar fazer mudanças mais profundas, vai precisar de dominar o Photoshop. No código-fonte desta página você encontra as imagens e o script; as folhas de css você encontra pelos endereços, também no código-fonte.

Veja o script tal como se acha no códigg-fonte:

<div class="nav">
<div class="table">

<ul class="select">
<li><a href="#"><b>Amostra</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub"> <li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub">
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub">
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub">
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
</ul>
</div>
</li>
</ul>
<div>
<div>  

Você pode fazer diversas mudanças manualmente. Observe que ele tem dois css (sem incluir o css desta página).

Nota: Se você achou que este gerador e as instruções são úteis, coloque um link para esta página para que as pessoas que visitam o seu site possam vê-las. O link pode ser assim:

<a href="http://www.otimizacao-sites-busca.com/criar-menus-css/queda-barra-horizontal/index.html" target="_blank" title="Menu Horizontal com Sub-menus em Queda, dentro de Barra Horizontel- CSS ">Menu Horizontal com Sub-menus em Queda, dentro de Barra Horizontel</a>

Links relacionados:

Gerador de CSS

Menu Horizontal com Fundo Colorido

Menu Horizontal com Cobertura Colorida

Cor e Forma Predefinidos

Tonalidades Cinza/Azul - Sub-menus em Queda

Menu Multinível

Taulado e em Queda

Queda - Cores do Sol ao Nascer