A commonly used navigation system on a wide variety of websites is that of the drop-down menu. We all recognize them and as computer users we have all developed an almost instinctive understanding of there use. After a conversation with a colleague today I decided to write a short tutorial, explaining their anatomy and how to use them.

The (semantics) Basics

As we all know we should endeavor to create clean and semantic documents for online publication. As your navigation is simply a list of links, then what better element to use than the simple unordered list.

<ul id="nav">
      <li><a href="home.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="links.php">Links</a>
            <ul>
                  <li><a href="favorites.php">Favorites</a></li>
                  <li><a href="blogroll.php">Blogroll</a></li>
            </ul>
      </li>
      <li><a href="contact.php">Contact</a></li>
</ul>

As you can see our navigation is an unordered list with an extra list in one of the list items, this creates our second level.

Add a Bit of Style

#nav{
	margin:0;
	padding:0;
	list-style-type:none;
	}
#nav li{
	display:block;
	float:left;
	width:100px;
	line-height:20px;
	background:#CCC;
	padding:5px;
	margin:0 5px 0 0;
	position:relative;
	}
#nav li ul{
	list-style-type:none;
	margin:0;
	padding:0;
	width:150px;
	position:absolute;
	left:0px;
	top:30px;
	display:none;
	}
#nav li:hover ul, #nav li.hover ul{
	display:block;
	}	

For this next step I will assume that you know what the bulk of the css is doing, essentially it creates your horizontal navigation and adds some (in this case boring) style.

The portion that we are interested in is what we do with the top level and lower level lists in respect to positioning. You want to position the sub navigation below it’s parent, to do this we use a little absolute positioning, setting it to the furthest left point (0px) and the top to the bottom of the list item (height 20px + 10px padding = 30px). One thing to note is that you need to position the top level relatively otherwise the list will try and position itself to the nearest relatively positioned ancestor (quite often the body tag).

Setting the display property of the sub navigation to none, hides it in its natural state. Next we invoke the hover pseudo class of the li to set the sub navigation’s display property to block. This will work now in most modern browsers, however in the usual suspects (i.e.6 et. al.) you can only use the hove pseudo class of an anchor tag. So it’s time to play with some javascript

Javascript / JQuery

In order to get this to work in all browsers, you need to account for some lack of support for the hover pseudo class on the li tag. There are a number of ways to do this, you can use the acclaimed Son of Suckerfish or, like I have, you can write your own code.

(function($) {
    $(document).ready(function(){ /* Wait for the document to have finished loading */
		$('#nav li').mouseover(function(){ /* Apply the function to the mouse over event of the li's within the nav */
			$(this).addClass('hover'); /* Add the hover class to the element */
		}).mouseout(function(){ /* Apply the function to the mouse out event of the li's within the nav */
			$(this).removeClass('hover'); /* Remove the hover class to the element */
		});
});
})(jQuery);

This code uses JQuery and it’s basic function is to add a class to the li on mouse over and remove it on mouse out. The code is explained in the comments.

And finally… an example

This post is designed to offer a basic introduction into this topic and can more than likely be improved upon or expanded, if you have any comments or suggestions then please leave a comment below.

And here is the example… have fun