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.

All you need to do is write a simple set of unordered lists, just like the ones we saw in the navigation element we made previously, and nest them inside each other to create the various levels of the menu, as I will show you shortly. Then wrap the whole thing in a div that has a class to associate the menu with the related CSS (multi_level_menus_class.css in the Stylib library), and you are done. If you plan to generate the menu choices from items in your site’s database, the programmers on your team will love the simplicity of the code (just nested unordered lists) that their middleware has to generate to populate these menus.

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.