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.

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.



12 Comments to “How to Create a CSS Drop Down Navigation”


  1. Web design Miami
    April 3rd, 2008 at 12:14 am

    Do you know if these additional javascripts will be needed in IE8.0?



  2. 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.



  3. 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!



  4. Allan
    April 3rd, 2008 at 12:05 pm

    You’re welcome.



  5. 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 :P



  6. 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.



  7. GT
    August 20th, 2008 at 1:13 am

    A pity it doesn’t work in Netscape, Safari or IE6 though.



  8. Allan
    August 20th, 2008 at 11:05 am

    @GT – I beg to differ, as a matter of fact it works in Safari, Netscape, Opera, IE 6 and even IE 5.5.

    If you are trying to get it to work, please contact me and I would be happy to assist you on setting it up.



  9. Lardlad
    September 16th, 2008 at 7:29 am

    I did find an issue with Safari (Version 3.1.2 (5525.20.1)). After you mouse off a list, there is a block left visible. Also if you hover over where the inner UL was, the menu comes back up.



  10. Lardlad
    September 16th, 2008 at 7:37 am

    Add display:none; and a display:block; on :hover

    #nav li ul {
    display:none; /* added property*/
    }

    #nav li:hover ul, #nav li.sfhover ul {
    position:relative;
    left:auto;
    height:1%;
    display:block; /* added property*/
    }



  11. Nathan
    December 30th, 2008 at 6:03 pm

    Thank you for the tutorial. It works in FF and Safari fine but, I did have an issue that I can not resolve in IE7.

    When hovering, the first sublist appears to the right and level with of the main list item instead of below it (the other sublist items are below the first as they should be). I can not reach the sublist links because to click them I have to leave the main li item and they then disappear.

    What have I missed?



  12. Robin
    February 16th, 2009 at 3:54 pm

    Hi, I got it just as you placed it and it worked on the first try. Now it´s just a matter of tweaking the CSS and its in. Thank you. This was finally a functional solutio to a very large amount of erroneous examples I had tried before. Greetings from Malaga, Spain.


Leave a Comment: