Danh sách lồng nhau

Bạn có thể đặt một danh sách bên trong một danh sách khác. Đây gọi là danh sách lồng nhau. Cách này hữu ích khi tạo cấu trúc phân cấp, chẳng hạn như dàn ý hoặc menu nhiều cấp. 

Để tạo danh sách lồng nhau, bạn chỉ cần đặt phần tử <ul> hoặc <ol> bên trong một phần tử <li> của danh sách khác.

Đây là ví dụ về một danh sách không có thứ tự lồng nhau:

<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>

Phần tử thứ hai chứa một danh sách lồng nhau với hai mục con. Trong trình duyệt, danh sách sẽ hiển thị như sau:

• Mục 1
• Mục 2
  • Mục con 2.1
  • Mục con 2.2
• Mục 3

Bạn cũng có thể lồng các danh sách có thứ tự vào nhau hoặc kết hợp cả hai.