Simple CSS Drop Down Menus

Update: After further testing, it appears that a bug in Internet Explorer prevents the drop down menu from opening. There are a number of ways to get around this IE bug, but I’m not going to go into that here.

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;
	float: left;
	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.

Posted October 29, 2011 by Alex Mansfield

3 responses to “Simple CSS Drop Down Menus”

  1. Thomas Sandvær says:

    Hi thanks for a simple nice example.
    However when viewing this menu in IE9 the UL is vertical instead of horizontal 🙁

    • alexmansfield says:

      Thanks for the bug report. Unfortunately, I’m traveling at the moment and don’t have access to IE9 for testing purposes. I’ll try to get it figured out when I get access to IE9 again.

    • alexmansfield says:

      After much delay, I finally got a chance to look into this further. I found the problem that you mentioned, and it can be fixed by adding “float: left” to the “#nav-primary a” section of the CSS. However, I also ran into an issue with IE not displaying the drop downs properly due to a bug in the way IE handles “:hover” states. I’ve updated the code above to fix the problem you mentioned and added a note explaining the issue with IE.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • PublishedOctober 29, 2011
  • Posted InCSS
  • DifficultyIntermediate