{"id":2980,"date":"2010-02-03T15:26:23","date_gmt":"2010-02-03T21:26:23","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=518"},"modified":"2010-02-03T15:26:23","modified_gmt":"2010-02-03T21:26:23","slug":"the-simple-secret-to-good-dropdown-navigation","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/the-simple-secret-to-good-dropdown-navigation\/","title":{"rendered":"The Simple Secret to Good Dropdown Navigation"},"content":{"rendered":"

\"Centered<\/a><\/p>\n

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.<\/p>\n

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

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!).<\/p>\n

The Good<\/h3>\n

Here\u2019s a well-structured nested unordered list — a perfect foundation for a dropdown menu.<\/p>\n

<ul id="navbar">\n\t<li><a href="#">Nav Item 1<\/a><\/li>\n\t<li><a href="#">Nav with Subnav<\/a>\n\t\t<ul>\n\t\t\t<li><a href="#">Subnav 1<\/a><\/li>\n\t\t\t<li><a href="#">Subnav 2<\/a><\/li>\n\t\t<\/ul>\n\t<\/li>\n\t<li><a href="#">Nav Item 3<\/a>\n<\/ul><\/pre>\n
The critical detail in the example above is where the nested unordered list appears in relation to the list item it is \u201cunder\u201d. The unordered list is inside<\/strong> the list item that will act as its parent in the navigation. <\/p>\n
That\u2019s a very critical bit. Without that little detail, it becomes much more difficult to determine which submenus \u201cbelong\u201d to which main list items. <\/p>\n
The Bad<\/h3>\n
By comparison, this is what I see 90% of the time when someone has a misbehaving menu:<\/p>\n
<ul id="navbar">\n\t<li><a href="#">Nav Item 1<\/a><\/li>\n\t<li><a href="#">Nav with Subnav<\/a><\/li>\n\t<ul>\n\t\t<li><a href="#">Subnav 1<\/a><\/li>\n\t\t<li><a href="#">Subnav 2<\/a><\/li>\n\t<\/ul>\n\t<li><a href="#">Nav Item 3<\/a>\n<\/ul> <\/pre>\n
It\u2019s an extremely minor difference. The only change here is that the nested unordered list appears immediately after<\/strong> the list item they expect it to appear under, instead of directly inside<\/strong> like it should be.<\/p>\n
And that makes a difference, obviously, in our CSS and JavaScript.  Elements aren\u2019t where the CSS is looking for them, relationships are harder to determine in JavaScript, and so forth.<\/p>\n
List-Based Navigation Menus<\/h3>\n
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:<\/p>\n