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:
- A Full-Width Centered Navigation Bar
- A Super Simple Horizontal Navigation Bar
- Horizontal CSS Dropdown Menus
- Easy CSS Dropdown Menus
And with that, I’ll be gone on vacation until next week. Take good care of the place, peeps!