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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Untitled Document</title>
</head>
<body>     
    <div id="container">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li> 
            <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                        <li><a href="#">Linky</a></li>
                    </ul> 
                </li> 
            <li><a href="#">Contact</a></li> 
        </ul> 	
    <aside>
    	<p>left column stuff here</p>
    </aside>
    	<section>
        	<p>Some text here because we need to verify the dropdown menu works when there is content directly below it</p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </section>
    <!--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: 30px auto;
	padding: 0 0 400px;
	background: #f63;
}
ul#nav {
	line-height: 30px;
	padding: 0;
	text-align: center;
}
	ul#nav li {
		float: left;
		position: relative;
		list-style: none;
		background: #c93;
	}
		ul#nav li a {
			width: 198px;
			display: block;
			border: 1px solid #fff;
			text-align: center;
			text-decoration: none;
			color: #fff;
			text-shadow: 0.1em 0.1em 0.3em #000;
		}
		ul#nav li:hover {background: #cc3;}
			ul#nav ul {
				position: absolute;
				padding: 0;
				left: 0;
				top: 31px;
				visibility: hidden;
			}
				ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: #666666;}
aside {
	width: 200px;
	float: left;
	padding: 50px 0 200px 0;
	text-align: center;
	background: #960;
}
section {
	margin: 0 0 0 200px;
	padding: 20px;
	background: #663;
}