The Best CSS Web Manual

Other CSS-based menus that I saw before I wrote these required different classes for every level of the menu to be present on every list item, which I felt made them unnecessarily complex. So when I originally approached the problem of creating a menu from nested list markup, I wanted to have it work without needing to add any additional markup—just vanilla XHTML list markup and the CSS.

What follows is an exercise that will teach you how to create CSS drop-down menus from “ID-and-class-free” lists. All that’s required is context—a surrounding div with a class, so the correct CSS styles are applied to the list within. The biggest benefi t of this all-CSS based approach is that it scales to a limitless number of choices at every level, simply by adding more items to the nested lists, without any modifi cations to the CSS.

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.