CSS Navigation Bars

Vertical Navigation Bar

A vertical navigation bar can be created by styling an HTML list (<ul>) and its list items (<li>). The key is to style the <a> elements within the list items as block elements to make the whole area clickable.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}

Horizontal Navigation Bar

There are two main ways to create a horizontal navigation bar: using display: inline or float: left on the list items.

li {
  display: inline;
}