CSS: styling a vertical menu

In this post I'm going to show you how to stylize a vertical menu with CSS. Vertical menus are very useful when you have many different items to be displayed on a page and you want to keep them organized. First of all, you need a basic HTML structure to style. In our case, we're going to use an unordered list for that purpose. Here's our HTML structure:

<ul id="navigation">
<li id="home"><a href="#">Home</a></li>
<li id="articles"><a href="#">Articles</a></li>
<li id="about"><a href="#">About</a></li>
<li id="contacts"><a href="#">Contacts</a></li>
</ul>

Since we want to use a different background image on each item, we assigned a different ID to each item. Here's our CSS:

#navigation {
  width: 20em;
  padding: 1em;
  margin: 0;
  border: 1px solid gray;
  border-radius: 10px;
  list-style: none;
}

#navigation li {
    display: block;
    margin-bottom: 0.5em;
    height: 100%;
    border-bottom: 1px solid gray;
    padding-bottom: 4px;
    font: 2em Impact, sans-serif;
    padding-left: 55px;
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-top: 5px;
}

#navigation #home {
  background-image: url(vertical-menu/home.png);
}
#navigation #articles {
  background-image: url(vertical-menu/articles.png);
}
#navigation #about {
  background-image: url(vertical-menu/about.png);
}
#navigation #contacts {
  background-image: url(vertical-menu/contacts.png);
}

#navigation li a {
    text-decoration: none;
    color: gray;
    text-transform: uppercase;
}
#navigation li a:hover {
    color: #333;
}

As you can see, each list item has its own background image after being turned into a block-level element. This is not strictly necessary, but let us to avoid some obtuse bugs in older versions of Internet Explorer. You can see a demo below.

Demo

Live demo