UL to DHTML Menu (v2.0.1 - Fun with Abstract Hierarchies!)

The (fake, goes nowhere) navigation for this page is a clean hierarchical nested list. Through the use of CSS and JS it is transformed into its current dynamic glory...and yet for users with really old browsers, or using a screen reader, it gracefully degrades to show the navigation hierarchy. The ⇒ icons are even added dynamically to submenus.

Toggle CSS On/Off   Change Orientation

Note that, like the Products heading (and unlike the other two) use of such a list should have the top menu item be a link to a landing page of options. This allows users with CSS support, but Javascript turned off, to get to the subsection links directly.

View source on this page to see the simple HTML for the menu. View the CSS file and the JS file to see the supporting (relatively minor) code.

This page tested to work (and look nearly-identical) on IEWin v5.5+, Safari v1.0, Netscape 7+ and Mozilla v1.2+. Netscape 6 works, but the first sub-menu blocks don't get put in quite the correct spot. Opera (v7) also doesn't get the position correct for these first-level blocks if the menu is in the (default) horizontal mode, but appears to work in vertical mode. Reportedly IE5.0 works pretty well in vertical mode, too, as of v2.0.1