Back to CSS Tips
Preview: what the working site looks like.

Some text here because we need to verify the dropdown menu works when there is content directly below it

This menu doesn't use the typical unordered list. I think it's more semantic this way because a group of anchors is not really a list. There are some other menus on this site that don't use the ul too though I think I'll keep the ones that do just because it's going to remain popular for a while.

The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
	<div id="container">
		<div id="menuBar">
			<section class="mainMenu"><a href="#">Top linky</a></section>
			<section class="mainMenu"><a href="#">Top linky</a>
				<nav class="subMenu">
					<a href="#x">linky</a>
					<a href="#x">linky</a>
					<a href="#x">linky</a>
					<a href="#x">linky</a>
					<a href="#x">linky</a>
				</nav>
			</section>
			<section class="mainMenu"><a href="#">Top linky</a>
				<nav class="subMenu">
					<a href="#x">linky</a>
					<a href="#x">linky</a>
				</nav>
			</section>
			<section class="mainMenu"><a href="#">Top linky</a></section>
		<!--end menuBar--></div>
	<!--end container--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 0 auto;
	background: #999;
}
#menuBar {
	margin: 30px 0 0;
	background: #ccc;
	text-align: center;
}
.mainMenu {
	display: inline-block;
	position: relative;
}
	.subMenu {
		width: 94px;
		position: absolute;
		left: 10000px;
		top: 30px;
		background: #ccc;
	}
		.mainMenu a:hover, 
		.subMenu a:hover { background: #999; }
			.mainMenu:hover .subMenu { left: 0; }
.mainMenu a:link, .mainMenu a:visited { 
	padding: 5px 15px;
	display: block; 
	text-decoration: none;
}
.mainMenu a:hover, .mainMenu a:active { color: #f00; }