Simple CSS Drop Down Menus

I was building a drop down menu while working on a personal project and I decided to see how lightweight I could make it. This is a pure CSS drop down menu, no Javascript is used. Only 50 lines of generously spaced CSS were needed to create a cross-browser drop down menu and the entire demo file weighs in at just over 1kb. It uses the same HTML structure as the default WordPress menu system, so it can easily be used in WordPress themes as well.

Here is the HTML:

<div id="nav-primary">
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Level 1</a>
			<ul>
				<li><a href="#">Level 2</a></li>
				<li><a href="#">More Level 2</a>
					<ul>
						<li><a href="#">Level 3</a></li>
						<li><a href="#">More Level 3</a></li>
					</ul>
				</li>
				<li><a href="#">More Level 2 Again</a>
					<ul>
						<li><a href="#">Other Level 3</a></li>
						<li><a href="#">Other Level 3 Again</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Lorem Ipsum</a></li>
	</ul>
</div>

As you can see, the HTML is just a simple list based menu structure. Each sub-menu is contained within the list item of the parent. This is required for hover states to work properly.

The CSS is nearly as simple as the HTML:

#nav-primary{
	background: #444;
	height: 40px;
}

#nav-primary ul{
	background: #444;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav-primary li{
	float: left;
	position:relative;
}

#nav-primary a{
	color: #fff;
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	text-decoration: none;
}

#nav-primary a:hover{
	background: #555;
}

#nav-primary ul ul{
	display:none;
	position: absolute;
	top: 40px;
	left: 0;
	width: auto;
}

#nav-primary ul ul li{
	width: 200px;
}

#nav-primary ul li:hover > ul {
	display: block;
}

#nav-primary ul ul ul {
	left: 100%;
	top: 0;
}

I have tested this menu with IE 7 and 8, Firefox 7, Chrome 14, Opera 11, and Safari 5.