Menu Example

update the menu (try changing <ul class="navigation drop"> to <ul class="navigation side">)

<ul class="navigation drop">
	<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>
			<ul>
			<li><a href="#">Bradicon!</a></li>
			<li><a href="#">Codepaste</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="#">GigglingCorpse</a></li>
			<li><a href="#">Bradleygill.com</a></li>
		</ul>
			</li>
			<li><a href="#">Bradleygill.com</a></li>
		</ul>
	</li>
	<li><a href="#">Teja.nu</a></li>
	<li><a href="#">Shaunk.ca</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>
</ul>

/* dropdown */

ul.navigation.drop, ul.navigation.drop 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.drop {
	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.drop 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.drop li{
	display: block;
	float: left;	/* this is so they appear side-by-side rather than on top of each other */
}
ul.navigation.drop 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.drop li a:hover {
	background-color: #aeaeae;
}
ul.navigation.drop li:hover > ul{
	display: block;	/* display a menu when its parent li is hovered over */
}
ul.navigation.drop li > ul{
	display: none;	/* hide the menu otherwise */
}

ul.navigation.drop 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.drop 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 */
}

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

/* side nav */
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;
	display: block;
	border-bottom: solid 1px #fff; /* ie6 border bug again */
}
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;
}





a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

Menu examples

Download the files