The Simple Secret to Good Dropdown Navigation

Published February 3, 2010 by CSS Newbies.

Centered Navigation Bar - Click to see it in action!

Almost every example of good dropdown navigation on the web today relies on a single, simple HTML structure: the nested unordered list. Without this structure, dropdown menus would be much more complex to build than they already are.

Of course, that means that knowing how to build a good nested unordered list is critical to this entire process. I’ve seen many examples of people trying to build a dropdown menu on their own, running into problems they didn’t understand, and throwing their hands up in frustration… only to discover their problem wasn’t some obscure CSS problem, but an error in their list structure.

As such, I thought it would be a good idea to go over what a good nested unordered list structure looks like (and what a bad one often looks like too!).

The Good

Here’s a well-structured nested unordered list — a perfect foundation for a dropdown menu.

<ul id="navbar">
	<li><a href="#">Nav Item 1</a></li>
	<li><a href="#">Nav with Subnav</a>
		<ul>
			<li><a href="#">Subnav 1</a></li>
			<li><a href="#">Subnav 2</a></li>
		</ul>
	</li>
	<li><a href="#">Nav Item 3</a>
</ul>

The critical detail in the example above is where the nested unordered list appears in relation to the list item it is “under”. The unordered list is inside the list item that will act as its parent in the navigation.

That’s a very critical bit. Without that little detail, it becomes much more difficult to determine which submenus “belong” to which main list items.

The Bad

By comparison, this is what I see 90% of the time when someone has a misbehaving menu:

<ul id="navbar">
	<li><a href="#">Nav Item 1</a></li>
	<li><a href="#">Nav with Subnav</a></li>
	<ul>
		<li><a href="#">Subnav 1</a></li>
		<li><a href="#">Subnav 2</a></li>
	</ul>
	<li><a href="#">Nav Item 3</a>
</ul> 

It’s an extremely minor difference. The only change here is that the nested unordered list appears immediately after the list item they expect it to appear under, instead of directly inside like it should be.

And that makes a difference, obviously, in our CSS and JavaScript. Elements aren’t where the CSS is looking for them, relationships are harder to determine in JavaScript, and so forth.

List-Based Navigation Menus

And since we are talking about list-based navigation menus, here are a few that have been discussed on CSS Newbie. All rely on unordered lists as their structure:

And with that, I’ll be gone on vacation until next week. Take good care of the place, peeps!

7 Responses

  1. Your Name (reply)

    I spent hours trying to diagnose such a simple problem and why my menus wouldn’t display correctly. I’m glad I stumbled on your page.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>