Welcome to the world of Perciformes - perch-like fish including the world famous Suckerfish
Just press tab to cycle through menu items. (Or <ctrl> + down arrow in Opera - i.e. whatever you usually use on the keyboard to cycle through links.) Then try a standards complient browser, eg Firefox, with javascript off. Better than nothing? I think so.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.
Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
Keyboard Accessibility by Matthew Carroll. To see these menus in action: http://www.coinet.org.uk
Benefits of this solution:
- With javascript on: Menu is keyboard accessible. Tabbing through the menu lists works intuitively.
- With javascript off - standards complient browser: Menu items are *still* keyboard accessible, but only the currently focussed menu item, and any sub-menu beneath it, are shown. Menus still appear in the correct place. This looks a little strange, but is better than tabbing through invisible lists. Using a pointing device the menus still work fine.
- With javascript off - IE: Keyboard accessibility breaks since IE doesn't support the :focus pseudo-class. Of course, the pointer support also breaks in IE without javascript. Decide for yourself how much you care about IE / non-javascript users ;-)
Possible disadvantage of this solution:
- You can use the keyboard and mouse at the same time, thereby being in more than one place on the menu.
Changes from original 'Son of Suckerfish' menus:
- Uses ie5/mac javascript fixes from http://simeons.net/suckerfish_ie5mac_fix.htm
- Uses additional javascript to select menu list items based on the properties of their child anchors (something you can't yet do in css). This is the 'key' to the keyboard accessibility, solving the problem that :hover propogates upwards to parent li's but focus doesn't.
- Uses additional css rules to make the individual menu items appear in turn even when javascript is unavailable.
- Uses the css A + B rule to display entire sub-menu when the top of the menu gets the focus.
- Shifting the sub menus off screen uses margin-left instead of left, this is necessary so that with javascript off, individual menu items can still be moved to the correct position.
For another keyboard-accessibility solution see: http://www.media72.co.uk/experimental/sf/3levels-beta.html