Summary - Menu bar

Build a horizontal menu bar with list and link styles.

Skeleton of a menu bar

In this lesson you combine earlier concepts and build a horizontal menu bar. A menu bar is usually a ul with li items, each holding an a link.

You need to drop the default list look, lay the links out horizontally, and highlight them on hover. We will go step by step: first the skeleton, then the links.

Lay items out with display: inline

List items stack vertically by default; each li starts a new line. The display: inline declaration turns an element inline: items flow side by side and wrap to a new line when needed.

Give li or a elements display: inline in a menu bar and they line up horizontally. The vertical list then becomes a horizontal menu.

Exercise Reset the menu skeleton

Write a ul.menu class selector and assign three declarations: list-style-type: none, margin: 0, padding: 0. The default markers and spacing will then disappear.

Show example solution

/* reset the menu bar skeleton */
ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Exercise Lay links horizontally and highlight them

Add two style blocks. First a ul.menu a descendant selector with display: inline, text-decoration: none and padding: 0.5rem 1rem. Second a ul.menu a:hover pseudo-class with color: tomato.

Show example solution

/* menu link and hover styles */
ul.menu a {
  display: inline;
  text-decoration: none;
  padding: 0.5rem 1rem;
}
ul.menu a:hover {
  color: tomato;
}

Test yourself

Which skeleton fits a menu bar?
- A series of divs holding span tags
- A ul with li tags, each holding an a link
- A table with tr rows
- Successive p paragraphs
Show answer

A ul with li tags, each holding an a link — Correct. The ul + li + a structure is the semantically right skeleton for a menu.

Next lesson: Pixel and percentage

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies