Como criar uma lista de vários níveis em HTML

Criar uma lista de vários níveis em HTML é mais difícil do que criar uma lista de vários níveis em um processador de texto, mas ainda pode ser alcançado usando HTML e CSS. Abaixo estão as etapas sobre como criar uma lista de vários níveis em HTML com o auxílio de CSS.

Antes de tentar as etapas a seguir, perceba que para criar uma lista de vários níveis em HTML, você deve aninhá-la em outro item da lista. Além disso, como o HTML tem apenas uma lista de marcadores ou uma lista de números, se você quiser alterar o tipo de lista, use CSS para criar um novo tipo de estilo.

Exemplo de HTML

Abaixo está um exemplo de como uma lista de vários níveis pode ser feita em HTML usando HTML e o estilo CSS definido nas tags HTML. Neste exemplo, temos dois itens de lista e, no segundo item da lista, outra lista ordenada com um tipo de estilo de lista alfabético inferior para criar um estilo de lista a, b, etc.

  1. Primeiro
  2. Segundo 
    1. Sub de segundo
    2. Outro sub
  3. Terceiro
  4. Quarto

Nota: No nosso exemplo acima, estamos usando alguns estilos adicionais de preenchimento e margem para ajudar a adaptar-se aos nossos valores CSS globais e para dar um exemplo de como você pode adicionar ou reduzir espaço e recuo.

Exemplo de saída

  1. Primeiro
  2. Segundo
    1. Sub de segundo
    2. Outro sub
  3. Terceiro
  4. Quarto

Exemplo de CSS e HTML

A solução acima funciona muito bem se você precisar criar uma lista de vários níveis apenas algumas vezes. No entanto, se você pretende ter várias listas multiníveis em todo o site, seria melhor incluir o código CSS, semelhante ao exemplo abaixo, no seu arquivo CSS. Em nosso exemplo, criamos duas classes chamadas "roman" e "square" e as chamamos no código HTML.

Código CSS 

 .roman {tipo-estilo-de-lista: lower-roman;}. square {tipo-estilo-de-lista: quadrado; margin-left: -2em;}

Código HTML 

  • Primeiro
  • Segundo 
    • Sub de segundo
    • Outro sub
  • Terceiro
  • Quarto

Exemplo de saída

  • Primeiro
  • Segundo
    • Sub de segundo
    • Outro sub
  • Terceiro
  • Quarto

Valores disponíveis do tipo de lista de CSS

Abaixo está uma lista de outros valores de estilo de lista de CSS que podem ser usados ​​no lugar dos exemplos que mostramos anteriormente. Também incluímos uma breve descrição de cada valor.

Nota: nem todos esses valores funcionam ou aparecem da mesma forma em todos os navegadores.

disco - Pequeno círculo sólido (mostrado acima).

círculo - pequeno círculo vazio (mostrado acima).

quadrado - quadrado sólido.

decimal - Número decimal começando com "1." (Mostrado acima).

decimal-leading-zero - Número decimal começando com 0 (por exemplo, 01, 02, 03, etc.).

lower-roman - Numeral romano em minúscula começando com "i".

upper-roman - Número romano em maiúscula começando com "I.".

grego inferior - grego minúsculo.

latim-baixo - latim minúsculo

latim superior - latim maiúsculo

armênio - numeração armênia tradicional

georgiano - numeração georgiana tradicional

alpha inferior - Letras alfabéticas minúsculas começando com "a". (Mostrado acima).

alpha superior - Letras alfabéticas maiúsculas começando com "A.".

none - não mostra nada.