The Best CSS Web Manual

If my email is anything to go by, drop-down menus like these appear to be one of the most sought-after pieces of CCS code, and I wrote my original version of them back in 2003 after I became tired of dealing with the complexities of making menus work with JavaScript. As you can see from Figure 6.36, this menu can be up to four levels deep, and it is very easy to implement in your site.

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.

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.