Menu Example

The HTML
The CSS
1. Drop down navigation
2. Side menu
Fun stuff
1. Examples
2. Files

The HTML

<ul class="navigation">
	<li class="current"><a href="#">First Item</a>
		<ul>
			<li><a href="#">Bradicon!</a></li>
			<li><a href="#">Codepaste</a></li>
			<li><a href="#">GigglingCorpse</a></li>
			<li><a href="#">Bradleygill.com</a></li>
		</ul>
	</li>
	<li><a href="#">Teja.nu</a></li>
	<li><a href="#">Shaunk.ca</a></li>
</ul>

What is the point of all those "#"s? I'm not linking anywhere specific, so I use the "#" character. Click one of those, and you don't leave the page you're on.

Note the placement of the nested ul. It is within an li set but after the a tag. This makes sense because the sub-list is a child of the item itself.

The CSS

Now this is where the difference between the two menus becomes apparent.

Drop down

ul.navigation, ul.navigation ul{
	list-style-type: none;	/* get rid of the bullets */
	margin: 0px;	/* different browsers like to have different default values set... */
	padding: 0px;	/* ...for any given tag, so it's often easiest to explicitly set them */
}

ul.navigation {
	height: 30px;	/* since the first set of elements are floating, in some browsers the height of the ul doens't match them... but we can set it  to get a nice background*/
	background-color: #efefef;
}

ul.navigation ul {
	z-index: 3;	/* i use 3 because usually I realize that I need to z-index something else above the main content, but below the menu... could be a higher number though */
	position: absolute;
	clear: both;
	width: 150px;	/* the width of our sub menus, we'll use this value again to offset the widths of subsequent child menus */
	display: none;	/* hide it */
}

ul.navigation li{
	display: block;
	float: left;	/* this is so they appear side-by-side rather than on top of each other */
}
ul.navigation li a {
	display: block;	/* this will let us set the width, height, and padding  - and have it actually work */
	
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #efefef;
}
ul.navigation li a:hover {
	background-color: #aeaeae;
}
ul.navigation li:hover > ul{
	display: block;	/* display a menu when its parent li is hovered over */
}
ul.navigation li > ul{
	display: none;	/* hide the menu otherwise */
}

ul.navigation li ul li {
	float: none;	/* we want the child lists to display vertically, rather than horizontally */
	border-bottom: solid 1px #aeaeae;	/* this is for a bug in IE6 that puts weird gaps in unless there is a border */
	
}

ul.navigation li ul li ul {
	margin-left: 150px;	/* I told you we'd use it again!  This shifts the sub menus to the left */
	margin-top: -30px;	/* and up */
}

This works great in firefox, chrome, safari, and IE7. Not so well in IE6 - it doesn't like the li:hover.

But, not to worry, we can fix that. How? With Javascript!

I'll use Jquery, accessed via Google so we don't have to keep track of an extra file. Any JS library or even raw Javascript would do, though.

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");	//we want jquery... let's say version 1?
google.setOnLoadCallback(
	function() {	//once everything has nicely loaded
		$('ul.navigation li').hover(
			function() {	//on mouse over
				$(this).addClass('current').find('> ul').addClass('child');
			},
			function() {	//on mouse out
				$(this).removeClass('current').find('> ul').removeClass('child');			
			}
		);
	}
);
</script>

What we're doing with this code is assigning mouse event handlers to every li which is a descendant of ul.navigation. When you mouseover an item, it will add "current" to its CSS class list. It would be like writing <li class="current">.
When you move your mouse off of the li, it will remove "current" from the class list.

The important idea here is that in a sub menu, you are still moused over the parent li!
The submenu is nested within the list item.

If you're not bored out of your mind at this point, you're probably wondering what .find('> ul').addClass('child') is for. IE6 doesn't support child selectors - you may remember the ul.navigation li > ul from the CSS?
That tells the browser that what follows only applies to the ul directly below the li, not just any descendant ul somewhere down the tree. Without it, we're stuck writing longer and longer CSS for each level of the navigation. Not fun, and more than moderately error prone.

But good news, we can simulate it via Javascript, and better news, Jquery even implements child selectors within its search function!

Now that we have the Javascript all set up, it's time to revisit the CSS.

ul.navigation li.current  ul.child{
	display: block;	/* display a menu when its parent li is hovered over,  for ie6 */
}

If we add that to our CSS file, everything should magically work. Of course, now that we have the Javascript working away, we could get rid of and reorganize the CSS.

It'll be a sweet day when I feel like I can disregard IE6 and make a drop down menu without Javascript.

Side menu

At this point i'm getting super bored/tired (it's now 6am), so I'll make this quick. With the same HTML, we can use the following CSS:

ul.navigation.side, ul.navigation.side ul{
	list-style-type: none;	/* get rid of the bullets */
	margin: 0px;	/* different browsers like to have different default values set... */
	padding: 0px;	/* ...for any given tag, so it's often easiest to explicitly set them */

}

ul.navigation.side {
	width: 200px;
}
ul.navigation.side li {
	float: none;
}
ul.navigation.side li a {
	display: block;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #efefef;
}

ul.navigation.side ul li a {
	background-color: #fff;
	font-size: 9pt;
	padding-left: 20px;
}

ul.navigation.side ul li li a {
	padding-left: 40px;
}
ul.navigation.side ul li li li a {
	padding-left: 60px;		/* 	for each new level, we need another of these.  
								If we had done it on the li, or ul 
								it would automatically indent, but I wanted to 
								be able to click anywhere on it.  You could 
								CSS differently, no big deal */
}
ul.navigation.side a:hover {
	background-color: #aeaeae; 
}
ul.navigation.side ul a:hover {
	background-color: #efefef;
}

Now that we've got the general layout, we can use Javascript or PHP to interact with the user in whichever manner we choose.

But, Brad, what's up with the .side? I'm glad you asked, my imaginary friend. As you know, elements can be assigned more than one class. CSS allows us to list classes one after another.
These rules will only be applied if a ul contains both the navigation and the side class.

Quick review of that:

element.one, element.two {
	/* logical OR */
}
element.one.two {
	/* logical AND */
}

Fun stuff

Examples

example.html - You can play with the html, to see what happens