Turn a list into a menu – CSS Exercise with Solution

A menu is still a list. Only its layout changes.

What to build

A horizontal menu.

Requirements

Each li in .menu is inline-block.
.menu has no bullets and a padding of 0.
Each li has a right margin of 12px.

Constraints

Do not change the HTML.

Example

li { display: inline-block; }

Why it works

The items keep their meaning as a list, and only their layout changes.

Hints

Hint 1

Items need to change, not the list.

Hint 2

Lists have default padding and bullets.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <style>
    .menu { list-style: none; padding: 0; }
    .menu li { display: inline-block; margin-right: 12px; }
  </style>
</head>
<body>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
  </ul>
</body>
</html>

Lesson: Display and normal flow →