Fancy Horizontal CSS List Menu

This week I am going to show you how to make a simple horizontal CSS list menu then make it a bit fancier. The objective here is to show you how to create a simple, cross browser compatible CSS list menu that will work in all browsers then build on the basics to make the menu more attractive using images gradients.

First of all we’ll need the HTML for our list menu, this is just a normal unordered list.

<ul id="navigation">
  <li><a href="#" class="active" title="item one">item one</a></li>
  <li><a href="#" title="item two">item two</a></li>
  <li><a href="#" title="item three">item three</a></li>
  <li><a href="#" title="item four">item four</a></li>
  <li><a href="#" title="item five">item five</a></li>
</ul>

Below is the final result we are trying to achieve with CSS.

• item one
• item two
• item three
• item four

Without any styling our HTML is just un-styled unordered list as show below.

• item one
• item two
• item three
• item four
• item five

Next we’re going to add the CSS code that will turn our list into a horizontal menu structure.

#navigation {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  }
#navigation li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0 1em 0 0;
  }

Now we should have our menu arranged horizontally with a gap between each item as shown below:

• item one
• item two
• item three
• item four
• item five

That’s all you need to turn your list into a horizontal menu. Now lets have a look at how we can make it look a bit more attractive with a bit more CSS and a few images.

#navigation {
  font-size: 62.5%;
  font-family:"Lucida Grande", Verdana, sans-serif;
  float: left;
  margin: 0;
  width: 100%;
  padding: 0;
  list-style: none;
  border-top: 1px solid #A2BD43;
  border-bottom: 3px solid #355A10;
  background: #538620 url("images/nav-bg.gif") repeat-x top left;
  }
#navigation li {
  float: left;
  margin: 0;
  padding: 0 1px 0 0;
  list-style: none;
  background: url("images/nav-li.gif") no-repeat top right;
  }
#navigation a, #navigation a:visited {
  float: left;
  padding: 7px 13px;
  text-decoration: none;
  border-bottom: none;
  color: #fff;
  font-size: 1.1em;
  line-height: 1.8em;
  }
/* Add a subtle change to the buttons when they are in a hover state or active */
#navigation a:hover, #navigation a.active {
  color: #fff;
  background: #538620;
  }
#navigation3 a.active {
  font-weight: bold;
  background: #538620 url("images/nav-over.gif") repeat-x bottom left;
  }
/* Add padding to the left and right of the menu so the buttons are away from the edge, you can set the padding for the parent UL if you specify the with of the elment instead of using a liquid layout. */
#navigation li:first-child {
  margin-left: 10px;
  }
#navigation3 li:last-child {
  margin-right: 10px;
  }

The final result is shown at the top of this article. Download the source files for examples of the menu in green, blue and red.

It’s all pretty simple, you should be able to understand the code with a little bit of CSS knowledge. Try experimenting using different fonts, padding and colours to make your own menus. You are free to use this menu in your own projects all I ask is you leave a comment below to say thank you.

This article was posted on 11 September 2009 in CSS, HTML, Tutorials

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.