Menus HTML5 usando apenas CSS3

Passou o tempo em que ficávamos "garimpando" códigos Javascript para fazer menus aplicáveis às páginas de Internet. Surgiu o CSS3.

Aqui está o modelo de uma página bem simples com um menu utilizando tags UL/LI e o mínimo de estilo CSS3:

<style>
#menu li ul {display:none;}
#menu li:focus ul {display:block;}
</style>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>

A primeira linha de estilo (na tag style) torna invisíveis todos os conteúdos que atendam à hierarquia de UL precedido por um LI a partir da tag cujo id seja "menu". Isto significa que os blocos internos das opções de primeiro nível da hierarquia UL/LI iniciarão no estado de ocultos (display:none).

A segunda linha de estilo (na tag style) é que define o principal comportamento deste menu UL/LI. Apesar do evento mencionado ser "focus", o menu vai apresentar um comportamento no momento em que o botão do mouse for pressionado sobre o nível hierárquico LI, porém somente naqueles níveis em que exista o atributo "tabindex". Isto se explica pelo fato de que o click de mouse dirige o foco para a LI selecionada.

Experimente trocar o conteúdo da tag style por:

<style>
#menu li ul {display:none;}
#menu li:hover ul {display:block;}
</style>

Desta forma, bastará apenas passar o ponteiro do mouse sobre o primeiro nível de uma tag LI (que possui o atributo tabindex) para que seu bloco correspondente apareça.