O HTML oferece uma maneira flexível de criar listas aninhadas por meio de seus elementos de lista não ordenada e não ordenada. Estes podem ser aninhados uns dentro dos outros um número ilimitado de vezes para ajudar a organizar dados hierárquicos, como cabeçalhos de capítulos e subcapítulos em um documento online. Com a ajuda de algum código CSS, as listas aninhadas podem ser estilizadas para atender às necessidades personalizadas, seja fornecendo atributos globais à lista ou usando um estilo diferente para cada camada do aninhamento.

Tipos de Lista

Existem dois tipos de listas que você pode usar em HTML, e há um elemento de item de lista que define os itens para ambos. O primeiro tipo de lista é uma lista não ordenada, que é chamada pelo

Tag. Isto dá uma lista com marcadores - embora você possa remover os marcadores dentro do CSS, definindo o tipo de estilo de lista para "nenhum". O segundo é uma lista ordenada, chamada com

, que retorna uma lista numerada. Entre as tags de abertura e fechamento, você define cada item da lista. Por exemplo:

• Item de lista 1
• Item de lista 2

Lista aninhada

Para criar uma lista aninhada, você deve chamar um segundo

ou
antes de um dado
1. tag foi fechada. Certifique-se de fechar a lista aninhada corretamente. Por exemplo, para criar uma lista ordenada aninhada em uma lista não ordenada, use o seguinte código:
   • Item de lista 1
     1. Item da subcategoria 1
     2. Sub item de lista 2
     3. Item da subcategoria 3
   • Item de lista 2

   Certifique-se de fechar cada item da lista e cada lista com o código de fechamento, como

,

e .

Declarando CSS

Se você quiser personalizar a aparência da lista aninhada, use CSS, que significa "Folha de Estilo em Cascata". A estética e o posicionamento do CSS estão normalmente contidos em uma folha de estilos separada, que é chamada entre os cabeçalhos com código semelhante ao seguinte:

CSS também pode ser declarado "Inline", o que significa no próprio atributo HTML, assim:

CSS inline tem precedência sobre o código na folha de estilo.

Na folha de estilo

O código CSS deve ser escrito em um formato específico para funcionar corretamente. Na folha de estilo, declare o código para cada atributo neste seguinte formato:

ul {

Valor do atributo;

}

Isso daria estilo à lista não ordenada. Para dar estilo a um aninhado

• , use o seguinte código:

  li li {

  Valor do atributo;

  }

  Isso define o código do item de lista com duas camadas de profundidade. Certifique-se de que todas as linhas "attribute: value" terminem com um ponto-e-vírgula e assegure que as chaves ao redor do elemento que você está definindo.