Drop-down menus allow you to offer your users a large number of navigation options using very little screen estate, while providing an insight into your site’s structure. The menus illustrated here, which you can fi nd in the Stylib library fi les, could provide links to dozens of pages, although only the top level choices are visible until the user hovers over the menu.
Anyone who read the original edition of Stylin’ with CSS might think they have seen these menus in Figure 6.36 before, but I have entirely rewritten the CSS to make them lighter (less code), and optimized them for the new breed of browsers that has emerged since Stylin’ was written way back in 2004. The user-modifi able CSS, such as colors, line weights, and font sizes, is separated from the more complex code that makes the menus work, so you can dive in and make stylistic changes confi dently, knowing you will not break the underlying “mechanics.” These menus also now work better in IE6, as I have hacked the bugs that prevented the backgrounds of the menu items from responding to clicks in that browser. So while they are visually similar (the XHTML markup I use to demo them here is unchanged from the original Stylin’ version), the CSS is greatly improved.