Back to TJK Design

Heading 2

This work is licensed under a
Creative Commons License.
If you've found this beneficial, please consider making a donation to Make A Wish

Check the latest versions:

Horizontal sub-menus using the position property:: All links are "exposed"; there are more links to tab through.
Vertical sub-menus using the display property:: More "keyboard-friendly"; there are less links to tab through.

About this solution:

With modern UAs this menu does not need script support,
In most browsers, Tabbing Navigation is possible,
When Active Scripting is disabled in MSIE, the menu "expands" to be fully accessible.

What's Good

There are no JavaScript instructions in the XHTML file. There is a complete Separation of Structure and Behavior.

What's Bad

We're using CSS for another purpose than presentation.

This solution has been tested in the following browsers:

Windows

Firebird v0.7
Firefox v0.8
Firefox v1.0.2
Firefox v1.0.6
Mozilla v1.4.1
MSIE v5.01 sp2
MSIE v5.5 sp2
MSIE v6.0 sp1
MSIE v6.0 sp2
NN v6.2.3
NN v7.1
NN v7.20
NN v8 beta
Opera v6.05 (there is no "popup", but it is script errors free so the top level list items are accessible)
Opera v7.54u2

Mac

Camino v0.8.2
Firefox v1.0
Mozilla v1.7.3
MSIE v5.0 (OS9)
MSIE v5.2 (OSX)
Safari v1.2.4
Safari v2.0.3
Opera 8.0
Omniweb 5.1

This solution may (or may not) work in other browsers, so if you're viewing this page in a UA not listed here, please use our feedback form to let me know and I'll edit this list accordingly.