What is the best way to display a drop down menu? for the sake of best practices.
keeping in mind:
-Accessabilty ,
Its viewable with javascript off
screen readers
-backwords capatabilty ,
viewable in IE6
-cross browser
I'm asking this because I've recently been working on some site that have css only drop down menu's that do not display the drop downs in IE6
Is displaying the drop down as a list if javascript is off the right way to do it?
The standard for javascriptless dropdown are called suckerfish or son of suckerfish dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/
In IE6, though, as you'll notice, they use a little bit of js to mimic hover. That's fine--so long as the first link you hover over, that triggers the dropdown, is a real link! Have that link go to a page where they can navigate to those pages hidden in the menu. If nothing else, simply copying the submenu they're missing and making that the content of the page will work.
Voila, accessibility.
If you must ensure, it's viewable with JS turned off, go with a CSS-solution. Here's one that claims to be cross-browser:
http://lwis.net/free-css-drop-down-menu/
even though it uses a little JS for IE6 (and older).
Or maybe setup your own, using this tutorial:
http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html
