Nested HTML Lists: Lists Inside Lists

A list item can contain another list. This is how you show levels: topics and subtopics, a menu with a sub-menu, an outline.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>
  <li>Fiction
    <ul>
      <li>Mystery</li>
      <li>Science fiction</li>
    </ul>
  </li>
  <li>Non-fiction
    <ul>
      <li>Biography</li>
      <li>Travel</li>
    </ul>
  </li>
</ul>

The rule

The inner list goes inside the li, after the text, not directly inside the outer ul. This is the most common nesting mistake.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- Wrong -->
<ul>
  <li>Fiction</li>
  <ul>
    <li>Mystery</li>
  </ul>
</ul>

<!-- Right -->
<ul>
  <li>Fiction
    <ul>
      <li>Mystery</li>
    </ul>
  </li>
</ul>

Mixing list types

You can nest an ordered list inside an unordered one, and the other way around.

1
2
3
4
5
6
7
8
9

<ol>
  <li>Prepare
    <ul>
      <li>Boil water</li>
      <li>Find a cup</li>
    </ul>
  </li>
  <li>Brew</li>
</ol>