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

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



  2. Allan

    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

    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

    You’re welcome.



  5. DNABeast

    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

    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

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



  8. Allan

    @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

    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

    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

    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

    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: