Add CSS Drop-Down Menus

Revision as of 19:40, 17 October 2008

Nothing strikes fear in the heart of CSS coders like a design mock-up with drop-down menu items. Many will argue drop down menus are a poor design choice to begin with. Sometimes there's just no getting around it. The client gets what the client wants.

Fortunately, creating drop-down menus isn't as hard as it used to be. In fact, you can even create them using just HTML and CSS with a tiny bit of Javascript.

Want to know how to do it? Let's get started.

This article is a wiki. Got some advice to share? Drop on in and add it.

Getting Started: HTML

We're going to design a horizontal menu with three drop-downs with list sub-items and a fourth that's just a top-level element. Here's what the HTML looks like:

<ul id="nav">
	<li><a href="">Home</a></li> 
    <li><a href="">Web</a> 
      <ul> 
        <li><a href="">Browser</a></li> 
        <li><a href="">Search</a></li> 
      </ul> 
    </li> 
    <li><a href="">Monkey</a> 
      <ul> 
        <li><a href="">Eating Banana</a></li> 
        <li><a href="">Throwing Poop</a></li> 
      </ul> 
    </li>
    <li><a href="">Contact</a> 
      <ul> 
        <li><a href="">Via Web</a></li> 
        <li><a href="">Via Phone</a></li> 
        <li><a href="">Via tin can and string</a></li> 
      </ul> 
    </li> 
	 
</ul>

As you can see it's a pretty basic HTML list, with some nested lists for our sub elements. I've given it an id of "nav" since we'll need it later to employ a little JavaScript. But first, let's add a little style.

Polishing with CSS

Paste this code into some <style> tags in the head of your HTML page (or in a separate, linked stylesheet if you prefer):

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	position: relative;
	float: left;

}
li ul {
	position: absolute;
	top: 30px;
	display: none;
}
ul li a {
	display: block;
	text-decoration: none;
	line-height: 20px;
	color: #000;
	padding: 5px;
	background: #CC0;
	margin: 0 2px;
}

ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }

What does this code do? First we set up our list by clearing the palate and getting rid of all styling, margins and padding.

Then we move on to defining li elements by positioning them relative to the page and floating them to the left. If you're looking to build a horizontal menu, don't float the li elements. Notice we've also given them a width of 100 pixels. You can adjust this to suit your menu items, but do apply a width otherwise your drop-down elements will look a bit wonky.

Next up in our style sheet are the nested lists which get absolute positions of 30 pixels from the top of its parent element. Why 30 pixels? The answer leads us to the next item, our link styles. Notice we have a line-height of 20 pixels and 5 pixels of padding on all sides. So, 20px + 5px top padding + 5px bottom padding, gives our menu a total height of 30px. The positioning on the nested lists ensures that it appears just below the top level menu items.

The last item in our styles definition is the guts of the operation. We use the :hover pseudo class to display our previously hidden drop-down elements. Now you may be wondering, what's up with that .over class? There's no .over class in our HTML... true, but there will be in minute, read on.

The remaining styles on our stylesheet are just some garish colors to ensure you can see the results. Obviously, you can come up with a better color scheme for your own work.

Here's a live example of the menus in action:

It should look fine, unless you happen to be using Internet Explorer 6. Coding for the outdated IE 6 browser is a grievance for many designers. Unfortunately, IE 6 still has about 50 percent of typical visitor traffic, so it is something that can't be ignored.

Compensating for IE 6

In order to get IE to understand fancy W3C standards compliant code we've written, we're going to need to add a little JavaScript. There are a number of ways to do this, but I'm fond of a very oldie but goodie that we'll borrow from A List Apart's famous, Suckerfish Drop Down technique.

Here's what the code looks like:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Essentially what this code does is grab our top level "nav" id and then use it to parse through and temporarily insert a class "over" to all our second level li elements. That will allow IE 6 to recognize our menus.

Extra CSS 3 Credit for Webkit Users

If you want to get really fancy, try adding this code to your link definition:

ul li a {
	display: block;
	text-decoration: none;
	line-height: 20px;
	color: #000;
	padding: 5px;
	background: #CC0;
	margin: 0 2px;
	display: block; 
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in;
}

This will leverage some experimental CSS 3 transition effects to give your rollovers a gradual fade in/fade out transitions. This particular hack will only work for Apple's Safari or Google's Chrome browsers.

Conclusion

And there you have it, standards compliant drop down menus that work across browsers.

Obviously, our example is pretty ugly, but we're confident you can come up with functional and nice looking drop-down menus using the basic outline here.

For a copy of the code, check out CSS Menus from our code library.