Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 62

Note Russ Weakley, a co-chair of the Web Standards Group, has created a huge
collection of different list styles (more than 70 at the current count) available at ht-
tp://css.maxdesign.com.au . To help take some of the pain out of creating
lists of links, it's also worth trying Accessify's List-O-Matic ( ht-
tp://accessify.com/tools-and-wizards/developer-tools/
list-o-matic ), an online list-builder that lets you select from a variety of prebuilt
styles.
So, already you can see that a simple list can be displayed in a different way from its
default style. It's possible to use CSS to create quite dynamic behavior with lists. For
example, as documented by Eric Meyer ( http://meyerweb.com/eric/css/
edge/menus/demo.html ) , the :hover pseudoclass can be used to display nested
lists as pop-out menus. The CSS to accomplish this is very simple:
li ul {display: none;}
li:hover > ul {display: block;}
This means any ul that is a descendent element of an li —that is, a nested
list—should not be displayed. The second line says that any ul that is a child element
of an li that is being hovered over should display as normal. In compliant browsers,
the end result (with a few more presentational styles added) looks like Figure 2-4 .
Figure 2-4. A pure CSS nested menu
All very neat. Patrick Griffiths' Suckerfish Dropdowns script
( www.htmldog.com/articles/suckerfish/dropdowns ) provides both a
CSS solution and a JavaScript solution that are pretty robust (multiple nested menus are