Free CSS Only Navigation Menu

When it comes to creating the navigation part of your website, the first thing you might think of is an unordered list that you style. In this article we’ll go through the creation of a custom navigation bar purely in CSS without using images.

Example:

Simple CSS menu, hover over the items to reveal the drop-down items.

The Markup

Just like any other navigation, we’re going to use an unordered list with some anchors:

<div id=“navi”>
  <ul id=“navi2”>
  <li><a href=”/”>Menu<br />
  <span>Free menu</span></a></li>
  <li>
  <a href=”/”>Dropdown Design<br />
  <span>Any number of items</span></a>
  <ul>
  <li><a href=”#” title=”“>First Menu Item</a></li>
  <li><a href=”#” title=”“>Second Menu Item</a></li>
  <li><a href=”#” title=”“>Third Menu Item</a></li>
  <li><a href=”#” title=”“>Forth Menu Item</a></li>
  </ul>
  </li>
  <li>
  <a href=”/”>Customisable<br />
  <span>Change colours</span></a>
  <ul>
  <li><a href=”#” title=”“>First Menu Item</a></li>
  <li><a href=”#” title=”“>Second Menu Item</a></li>
  <li><a href=”#” title=”“>Third Menu Item</a></li>
  <li><a href=”#” title=”“>Forth Menu Item</a></li>
  <li><a href=”#” title=”“>Fifth Menu Item</a></li>
  <li><a href=”#” title=”“>Sixth Menu Item</a></li>
  </ul>
  </li>
  </ul>
</div>

This is the foundation of a semantically correct, degradable navigation structure.

The CSS Styling

#navi {
  background: #eee;
  height: 60px;
  font-family: arial;
}
#navi a, #navi a:hover {
  text-decoration: none;
}
#navi li a span {
  font-size: 11px;
  color: #9d9d9d;
  font-weight: normal;
}
#navi2 {
  width: 600px; /* Set width to stop menu breaking in samll windows */
}
#navi2, #navi2 ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#navi2 a {
  display: block;
  line-height: 16px;
  padding: 14px 20px 11px;
  color: #212121;
}
#navi2 li:hover {
  background: #d4d4d3;
  cursor: pointer;
}
#navi2 li:hover span {
  color: #fff;
}
#navi2 li {
  float: left;
  font-size: 16px;
  font-weight: bold;
}
#navi2 li ul {
  position: absolute;
  width: 188px;
  left: -999em;
  border: 1px solid #e6e6e6;
  border-width:0px 1px;
}
#navi2 li li {
  font-weight: normal;
  margin: 0;
  padding: 0;
}
#navi2 li:hover ul {
  left: auto;
}
#navi2 li ul li a {
  line-height: 34px;
  color: #565656;
  font-size: 12px;
  width: 148px;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;
}
/* IE7 Fix */
#navi2 li:hover {
  position: static;
}

There we have it. You might want to get a bit more creative with the colour scheme to march your site but by now you should have a the basic idea. A note on browser compatibility, the menu should work with all modern browsers but is unlikely to work with IE6.

This article was posted on 3 April 2009 in Code, CSS, Freebies, 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.