How to Create a CSS Drop Down Navigation
April 2nd, 2008 | Posted in Web Design.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.
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.







Web design Miami
April 3rd, 2008 at 12:14 am
Do you know if these additional javascripts will be needed in IE8.0?
Allan
April 3rd, 2008 at 8:24 am
I hope not, but then again you never know.
Some screen shots of IE 8 really have me concerned that web designers will have to accommodate yet another different browser’s settings.
codename_gimmick
April 3rd, 2008 at 12:04 pm
Excellent– my thanks for this! Drop-down navbars are a must-have if you really expect the public to try and navigate more than one page of your site!
Allan
April 3rd, 2008 at 12:05 pm
You’re welcome.
DNABeast
April 11th, 2008 at 6:51 pm
This looks very similar to the Suckerfish dropdowns over at HTMLDog.
http://htmldog.com/articles/suckerfish/
Hmm,.. even down to the naming conventions,..
Did you pinch this script?
You cheeky little
Allan
April 11th, 2008 at 10:06 pm
DNABeast,
As a matter of fact the Javascript was from Suckerfish. It seems to be the best solution for IE.
I’ve added a link to their site for credit.
Nice catch.