Uma simples lista de botões pode olhar melhor do que as ligações HTML5 comuns, mas às vezes, a sua página precisa ter um esquema de navegação mais complexa. Por exemplo, você pode querer criar um sistema de menu para ajudar o usuário ver a estrutura do seu site.

Construir uma lista aninhada

Comece criando um sistema de listas aninhadas, sem qualquer CSS em tudo.

No estilo CSS é no lugar ainda, mas a lista tem suas próprias complexidades:

• A lista preliminar tem três entradas. Esta é realmente uma lista de várias camadas. O nível superior indica categorias, não necessariamente links.

• Cada elemento no topo da lista tem a sua própria sub-lista. Uma segunda camada de links tem várias ligações na maioria dos elementos.

• O elemento de desenvolvimento web tem outra camada de sub-listas. O layout geral desta entrada da lista corresponde a uma hierarquia complexa de informações - como a maioria dos sites complexos.

• A lista valida ao rigoroso padrão HTML. É especialmente importante para validar o seu código antes de adicionar CSS quando envolve código HTML um pouco complexa, como a lista de vários níveis. Um pequeno problema na estrutura HTML que pode passar despercebida em um documento HTML simples pode causar todos os tipos de problemas estranhos no seu CSS.

Aqui está o código para a lista aninhada em HTML simples:

Alguns dos meus links favoritos
Rede social
digg
reddit
stumbleupon
Referência 
Google
wikipedia
dicionário
desenvolvimento web 
XHTML / CSS 
escolas w3
HTMLHELP
CSS Zen Garden
Programação 
javascript.com
php.net
mysql.com

Tome especial cuidado com o seu recuo ao fazer uma lista aninhada complexo como este. Sem indentação apropriada, torna-se muito difícil estabelecer a estrutura da página. Além disso, um item da lista pode conter texto e uma outra lista. Qualquer outro dispositivo irá causar um erro de validação.

Escondendo as listas internas

O primeiro passo da criação de um sistema de menu dinâmico é para esconder quaisquer listas que são incorporados em um item da lista. Adicione o seguinte estilo CSS para a sua página:

li ul {display: none;}

Na realidade, você costuma aplicar esta técnica só a um div especialmente marcado, como um sistema de menu.

Sua página irá sofrer uma transformação surpreendente.

Isso pequenino trecho de código CSS é uma verdadeira potência. Ele faz algumas coisas fascinantes, tais como

• Operando em listas desordenadas que aparecem dentro de itens da lista: O que isso realmente significa é a lista de nível superior não serão afetadas, mas qualquer lista desordenada que aparece dentro de um item da lista terá o estilo aplicado.

• utilização display: none para tornar o texto desaparecer: Definir o exibição atribuir a conta a página HTML para esconder os dados fornecidos por completo.

Este código funciona bem em quase todos os navegadores.

Obtendo as listas internas para aparecer no momento certo

A parte divertida é obter as listas de interiores para aparecer quando o mouse está sobre o elemento pai. Um segundo estilo CSS pode fazer isso acontecer:

li ul {display: none;} li: hover ul {display: BLOCO}

O novo código é bastante interessante. Confira o efeito de segurar o mouse sobre o elemento de Redes Sociais.

Este código não funciona em todos os navegadores! Internet Explorer 6 (IE6) e versões anteriores não suportam a :flutuar pseudo-classe em qualquer elemento excepto uma. Fornecer um comentário condicional com um estilo alternativo para as primeiras versões do IE. Todos os navegadores modernos (incluindo o IE 7 e posterior) funcionam bem.

Aqui está como o código de lista-reaparecimento funciona:

• Todas as listas dentro de listas estão ocultas. A primeira regra de estilo esconde qualquer lista que está dentro de um elemento da lista.

• li: hover refere-se a um item da lista que está sendo pairou diante. Ou seja, se o mouse está situado no topo de um item da lista, esta regra diz respeito a ele.

• li: hover ul refere-se a uma lista desordenada dentro de um item da lista pairou. Em outras palavras, se algum conteúdo é uma lista desordenada que repousa dentro de uma lista que atualmente tem a pairar mouse sobre ele, aplicar esta regra.

• Exibir a lista como um bloco. display: block substitui o anterior display: none instrução e mostra o elemento em particular como um bloco. O texto reaparece magicamente.

Este hide-and-seek truque não é tudo o que grande em sua própria. É realmente muito chato ter o conteúdo pop-up e ir embora assim. Há um outro problema mais irritante.

Para ver por que isso acontece, ter um outro olhar para o código CSS que faz com que o segmento para reaparecer:

li: hover ul {display: BLOCO}

Esse código significa set exibição para quadra para qualquer ul que é um filho de um pairou li. O problema é que o desenvolvimento Web li contém um ul Isso contém mais doisuls. Todas as listas em Desenvolvimento Web aparecer, não apenas o filho imediato.

Mais uma modificação do CSS corrige este problema:

li ul {display: none;} li: hover> ul {display: BLOCO}

O símbolo maior que (>) É um selector ferramenta especial. Ele indica uma relação direta. Em outras palavras, o ul deve ser um filho direto do pairou li, não um neto ou bisneto. Com este indicador no lugar, a página age corretamente.

Este truque permite que você crie listas aninhadas tão profundamente como você deseja e para abrir qualquer segmento pairando sobre seu pai.

Meu código atual tem uma lista com três níveis de aninhamento, mas você pode adicionar tantas listas aninhadas que quiser e usar esse código para torná-lo agir como um menu dinâmico.

Este tipo de menu não é necessariamente uma boa ideia. Tendo o material pop em torno de como este é realmente muito perturbador.