13.7. Building Drop-Down Menus

13.7.1. Problem

Inevitably, there will be a client or boss who wants everything “one click away” in a site navigation structure. While this is not an altogether ignoble aspiration, placing links to every single section of a site on a single page could add significant clutter to a page. Enter the drop-down menu.

13.7.2. Solution

In desktop programs and operating systems, these menus are often activated by clicking a term, after which you see a variety of subterms and categories. On the Web, however, the paradigm seems to be that drop-down menus appear when the user hovers over a top-level link, as shown in Figures Figure 13-7 and Figure 13-8. By using a combination of CSS :hover rules and positioning techniques, most of the heavy lifting can be done without much JavaScript at all. jQuery can simply offer minor enhancements for IE 6.