For Your Consideration

There are some things to bear in mind if you're going to implement CSS-driven menus like those explored in this project. Leaving aside wider questions like whether or not drop-down menus are a good user interface (some say yes, others no), the actual behavior of these menus should be considered.

Because the appearance of submenus depends on list items being in a hover state, it's fairly easy for users to accidentally let the menus snap closed. The instant the mouse pointer moves outside any of the menus, all of the currently visible submenus will disappear. The same is often true of JavaScript-driven menus, but in JavaScript you can build in delay timers that give the user a small interval of time to move the mouse back inside the menus before they go away. CSS offers no capability to define such delay timers and is not likely to do so any time soon (if ever).

For this reason, it is imperative that submenus at least sit adjacent to their parent list items, if not actually overlap them by a small amount. If a gap even a pixel wide appears between a menu entry and its submenu, there is a high probability that the mouse pointer will exit the hover state while moving through that gap and cause any open submenus to disappear. Such a situation would basically make it impossible to use some (or all) of the submenus.

Of course, it is possible to use the techniques presented here to define the appearance of menus and then use JavaScript to drive the dynamic behaviors that is, the showing and hiding of menus, any delay timers to make the menus more usable, and the event handling that glues it all together. Such a technique is beyond the scope of this book, but in essence it would involve leaving out the display: block; rule and behavior declaration, relying on JavaScript to take the place of those styles.

As to which is better, again, there is controversy that we do not presume to resolve here. Some say that behavior should not be driven by CSS, which is a presentation language, and should instead be handled by a scripting language like JavaScript. Others feel that this sort of behavior falls within the realm of what CSS covers, and so there's nothing wrong with such techniques. It is expected that the debate will continue for a long time to come, so authors need to make up their own minds about which they prefer and act accordingly.