Accessible CSS drop down menus with and without Javascript and in IE 6

Stylish CSS drop down menus are nothing new. They can be easily coded to be semantic with nested unordered lists and can also be made accessible to keyboard users with a bit of helpful javascript. They can even work without javascript enabled by adding the :hover pseudo class to the parent list element. However, IE 6's lack of support for this means without javascript IE 6 users simply won't be able to see the links.

There is a simple solution.

Step 1. Build the page for browsers without javsacript
Because we want this to work in IE6 we can't use the :hover pseudo class on the list items. Instead build your css and xhtml page but make sure all nested lists in the navigation menu are visible. Style it up as best you can to make it look acceptable, even though all the menus will be expanded. In the case of drop down menus that overlap if they're all visible, you will need to turn the menu into a normal line-by-line menu with the sub menus indented. This is how all users without javascript will see your page.

Step 2. Add some Javascript.
Now that we have a non-javascript menu that works in IE 6 we can make it work as a drop down menu for users who have javascript enabled. We're using jQuery to make this easier and to allow a nice fade in on the drop down menu. The first thing to do is add a class to our main menu as soon as possible. Then add the code to make the sub menus fade in and out on mouse over.

$(document).ready(function(){
	$("#mainNav").addClass("js");
	$("#mainNav li").hover(function(){
		$("ul",$(this)).fadeIn();
	},function(){
		$("ul",$(this)).fadeOut();	
	});
});

Step 3. Add some style.
Now, we can use the “.js” class in our CSS to re-style the menu and override any of the style we added in step 1. Styling CSS drop down menus is well documented elsewhere so I won't go into too much detail here.

Step 4. Add some more javascript to enable full keyboard access.
What we have so far isn't enough to allow full keyboard control. Keyboard users would have to disable javascript as well as CSS to see the links. By adding a bit more jQuery we can make the drop down menus fully navigable via the keyboard.

$(document).ready(function(){
	$("#mainNav").addClass("js");
	$("#mainNav li").hover(function(){
		$("ul",$(this)).fadeIn();
	},function(){
		$("ul",$(this)).fadeOut();	
	});
	$("a").focus(function(){ // hide drop downs
		$("#mainNav ul").fadeOut();
	});
	$("#mainNav li a").focus(function(){ // main nav anchor focus
		$("ul",$(this).parent()).fadeIn();
	});
	$("#mainNav li li a").unbind(); // unbind hide drop downs from sub nav anchors
});

Lets first look at the rule labelled ‘main nav anchor focus’. This is assigned to the top level anchors in the main menu as that is what the keyboard will tab between when the user uses the tab key to cycle through links. When the anchor gets focus it shows the drop down menu associated with it. The fact that this is now visible means the next time the user hits tab the first sub menu item will have focus, and as such can be visited.

When the user tabs past the last sub menu item we want the down down to fade out. This is why we added the ‘hide drop downs’ rule to all anchors. This means, when any item is tabbed to all menus will close. We want to avoid this happening when the user tabs to the sub menu items and of course when they tab to a sub menu parent item. That's why we add it before the $("#mainNav li a") rule. This means it will fire the sub nav hide first and then open the one that is tabbed to. We prevent the sub nav links firing it with the unbind rule at the end.

Thats it, CSS drop down menus with keyboard control in all browsers, with and without javascript enabled.