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 is actually two menus combined, the red centered menu from this page and the dropdown menu found here.

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>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 1200px;
	margin: 30px auto;
	padding: 0 0 400px;
	background: #f63;
}
ul#nav {
	line-height: 30px;
	padding: 0;
	text-align: center;
	background: #c93;
}
	ul#nav li {
		display: inline-block;
		position: relative;
		list-style: none;
	}
		ul#nav li a {
			width: 198px;
			display: block;
			text-decoration: none;
			color: #fff;
		}
		ul#nav li:hover {background: #cc3;}
			ul#nav ul {
				position: absolute;
				padding: 0;
				left: 0;
				top: 30px;
				visibility: hidden;
				background: #c93;
			}
				ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: #666666;}