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.