How to Create a CSS Drop Down Navigation

Ever come across a site that uses a nifty drop down effect when you hover over a link?

Here’s how you do it:

1. Create a simple unordered list:

<ul id="nav">
	<li><a href="#">Link #1</a></li>
	<li><a href="#">Link #2</a></li>
	<li><a href="#">Link #3</a></li>
	<li><a href="#">Link #4</a></li>
</ul>

2. Create a second tier unordered list:

<ul id="nav">
	<li><a href="#">Link #1</a></li>
	<li><a href="#">Link #2</a>
<ul>
	<li><a href="#">Sub-Link #1</a></li>
	<li><a href="#">Sub-Link #1</a></li>
	<li><a href="#">Sub-Link #1</a></li>
</ul>
</li>
	<li><a href="#">Link #3</a>
<ul>
	<li><a href="#">Sub-Link #1</a></li>
	<li><a href="#">Sub-Link #1</a></li>
	<li><a href="#">Sub-Link #1</a></li>
</ul>
</li>
	<li><a href="#">Link #4</a></li>
</ul>

3. Now add some CSS into the mix:

#nav, #nav li, #nav li ul, #nav li ul li {
margin:0;
padding:0;
list-style:none;
}

#nav li {
float:left;
width:100px;
}

#nav li ul {
position:absolute;
left:-999em;
}

#nav li ul li {
clear:both;
}

#nav li:hover ul, #nav li.sfhover ul {
position:relative;
left:auto;
height:1%;
}

4. Add some compatibility for Internet Explorer:

Since Internet Explorer does not have the capability to comprehend the li:hover, this Javascript is needed…

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

This javascript fix is from Suckerfish.

How it works

Basically your second-tier unordered list is set as absolute. Therefore it can be positioned anywhere. In our case, we are initially going to position it -999em to the left, which will make it appear far off the screen. When the mouse hovers over the first-tier items, the second-tier will restore to it’s originally coded space(on the screen), but only if that list-item is being hovered over.

5. Implementation

Put your CSS and your Javascript into external files called nav.css and nav.js.

Add this to your head:

<link href="nav.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
<script language="javascript" src="nav.js" type="text/javascript"></script>
<![endif]-->

The if IE conditional will only load the Javascript if the browser is Internet Explorer.

Demo

Conclusion

I’ve just given you the building blocks to create a cross-browser dropdown navigation. There can be so much more customization you can do such as colors, images, etc. I hope you enjoyed this web design tutorial.