A menu with a submenu – HTML Exercise with Solution

Build the kind of nested list that many site menus are made from.

What to build

A navigation list of links, one with a sub-list.

Requirements

An outer ul with three direct li items, with these links: Home to /, Courses to /courses, Help to /help.
Inside the Courses item, after its link, a nested ul with two links: HTML to /courses/html and CSS to /courses/css.
A description list after the menu with one term HTML and the description The structure of a page.

Constraints

A ul may only have li children.

Example

The nested list belongs to the Courses item, so it goes inside that li.

Why it works

Because the inner list is inside its item, a screen reader announces it as part of Courses, and CSS can later turn it into a dropdown.

Hints

Hint 1

The inner ul goes inside the li for Courses, after its link.

Hint 2

Links go inside list items, so li is the parent of a.

Solution

Show one correct solution (try it yourself first)

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/courses">Courses</a>
    <ul>
      <li><a href="/courses/html">HTML</a></li>
      <li><a href="/courses/css">CSS</a></li>
    </ul>
  </li>
  <li><a href="/help">Help</a></li>
</ul>
<dl>
  <dt>HTML</dt>
  <dd>The structure of a page</dd>
</dl>

Lesson: Lists for steps, items and definitions →