Two-Level Menu (as Drop-Down)

For a website with ten to fifty pages, it is helpful to group the pages into sections.  The result is a two-level hierarchy, with the "sections" as the top-level.  Within each section, the individual pages form a second, or "sub" (subsidiary) level.

One way to show these two levels is via a horizontal drop-down menu.

 NOTE: For Accessibility, Javascript is required even on CSS-2-compliant browsers (IE 7, Firefox).  There is no CSS way to drop open the sub-menus when the user tabs to the main menu item [the <a> within the <li> gains focus, not the <li> itself].  To be accessible, if Javascript is disabled, all sub-menus are open when the page appears.

An Alternative: If all content can be reached by links not in the drop-downs, then the top menu row could be used simply to reach the main page of each section.  For example, use the two-row or row+column menu to access pages within the current section.  Then the drop-down menu is merely an accelerator for getting directly to any page of other sections.  In such a design, it would actually be preferable to suppress the drop-downs for impaired users, to lessen the number of choices they need to tab through.