Listas aninhadas

Você pode colocar uma lista dentro de outra—isso é chamado de lista aninhada. Isso é útil para criar estruturas hierárquicas, como tópicos ou menus de vários níveis. 

Para criar uma lista aninhada, você simplesmente coloca um elemento <ul> ou <ol> dentro de um elemento <i><li></i> de outra lista.

Aqui está um exemplo de uma lista não ordenada aninhada:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

O segundo item contém uma lista aninhada com dois subitens. No navegador, ela será exibida assim:

• Item 1
• Item 2
  • Subitem 2.1
  • Subitem 2.2
• Item 3

Você também pode aninhar listas ordenadas ou misturar ambas.