HTML and CSS Reference
In-Depth Information
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:// . To help take some of the pain out of creating
lists of links, it's also worth trying Accessify's List-O-Matic ( ht-
list-o-matic ), an online list-builder that lets you select from a variety of prebuilt
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 (
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
( ) provides both a
CSS solution and a JavaScript solution that are pretty robust (multiple nested menus are
Search WWH ::

Custom Search