Menu Multinível Totalmente Controlado pelo Estilo CSS

Menu multinível totalmente controlado pelos estilos que ficam dentro do corpo da página. Neste exemplo o menu tem apenas 3 links e os submenus vão até o terceiro nível, mas tanto uns como outros podem ser ampliados. embora não seja recomendável links em muitos níveis, em certas circunstâncias eles são necessários. Este exemplo pode servir de referência. As cores e outros parâmetros podem ser modificados com udanças na lista de estilos.

• Home
• Otimização
  • ABC da Otimização
  • Visão Geral
• Posicionamento
  • Visão Geral
  • Perguntas e Respostas
• Serviços
  • Orçamento
  • Otimização Básica
    • Super Home
    • Home Padrão

Veja o script que se acha no corpo da página:

<ul class="otimizacaositesbusca otimizacaositesbuscam">
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/" target="_blank" title="Home">Home</a></li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="#"><span>Otimiza&ccedil;&atilde;o</span></a>
<ul class="otimizacaositesbuscam">
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/otimizacao/" target="_blank" title="ABC da Otimização">ABC da Otimiza&ccedil;&atilde;o</a></li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/otimizacao/" target="_blank" title="Visão Geral da Otimização de Sites">Vis&atilde;o Geral</a></li>
</ul>
</li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/posicionamento/"><span>Posicionamento</span></a>
<ul class="otimizacaositesbuscam">
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/posicionamento/" target="_blank" title="Visão Geral do Posicionamento de Sites">Vis&atilde;o Geral</a></li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/posicionamento/perguntas.htm" target="_blank" title="Perguntas e Respostas Sobre Posicionamento de Sites">Perguntas e Respostas</a></li>
</ul>
</li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/servicos/" target="_blank" title="Serviços de Otimização"><span>Servi&ccedil;os</span><![if gt IE 6]></a><![endif]>
<ul class="otimizacaositesbuscam">
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/servicos/formulario.htm" target="_blank" title="Formulário de Orçamento">Or&ccedil;amento</a></li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/servicos/otimizacao-basica.htm" target="_blank" title="Otimização Básica de Sites"><span>Otimiza&ccedil;&atilde;o B&aacute;sica</span><![if gt IE 6]></a><![endif]>
<ul class="otimizacaositesbuscam">
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/servicos/super-home.htm" target="_blank" title="Super Home">Super Home</a></li>
<li class="otimizacaositesbuscai"><a class="otimizacaositesbuscai" href="http://www.otimizacao-sites-busca.com/servicos/inicial-padrao.htm" target="_blank" title="Home Padrão">Home Padr&atilde;o</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<a href="http://www.otimizacao-sites-busca.com/criar-menus-css/queda-multi-nivel/" target="_blank" title="Menu em Queda Multinível - CSS">Menu em queda Multinível</a>

Links relacionados:

Gerador de CSS

Menu Horizontal com Fundo Colorido

Menu Horizontal com Cobertura Colorida

Cor e Forma Pré-definidos

Sub-menus em Queda em Barra Horizontal

Tonalidades Cinza/Azul - Sub-menus em Queda

Tabulado e em Queda

Queda - Cores do Sol ao Nascer

Ruy Miranda