Pure CSS DropDown

dropdown.html

<style type="text/css">
	<!–
	/* Style the links */
	#exmaplebox a {
		float:left;
		text-decoration:none;
		font-size:14px;
		font-weight:bold;
		height: 22px;
		width: 100px;
		text-align:center;
		display:block;
		padding: 0 10px 0 10px;
		margin: 2px 10px;
		border:1px solid #CCC;
	}
	
	#exmaplebox a:hover {
		text-decoration:underline;
	}
	
	/* this bit is the drop down bit */
	
	#exmaplebox ul {
		float:left;
		margin:0;
		padding:0;
		height: 26px;
		width: 150px;
		overflow:hidden;
		list-style:none;
	}
	
	#exmaplebox ul:hover {
		overflow:visible;
	}
	
	#exmaplebox ul li {
		float:left;
		width:300px;
		margin:0;
		padding:0;
	}
	–>
</style>
<div id="exmaplebox">
	
	<a href="#link">Link</a>
	<ul>
		<li><a href="#link">Link</a></li>
		<li><a href="#link">Large Sub-Link</a></li>
		<li><a href="#link">Sub-Link</a></li>
	</ul>
	<ul>
		<li><a href="#link">Long link</a></li>
		<li><a href="#link">Sub-Link</a></li>
		<li><a href="#link">Large Sub-Link</a></li>
	</ul>
	
	<a href="#link">Link</a>
</div>