This is a great articles from CSSNEWBIE.COM. I actually used this the other day on a clients site. I thought it was good so yours seeing it now! This is often overlooked so pay attention.

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.

Categories: Featured