few lines of jquery which will make a css based "flyout" nav acessible via the keyboard and work in ie6.

accessibleFlyoutNav

$(document).ready(function() {
	$('#navPrimary').children().focusin(function() { $(this).addClass('accessibleHover'); })
	$('#navPrimary').children().focusout(function() { $(this).removeClass('accessibleHover'); })
});

Your performance would be pretty poor with this. Could be much better to store the result of $('#navPrimary').children(), then call focusin and focusout on that.

$(document).ready(function() {
  var children = $('#navPrimary').children();
  children.focusin(function() { $(this).addClass('accessibleHover'); })
          .focusout(function() { $(this).removeClass('accessibleHover'); });
});

Before this change:

1. select nav element
2. select all of its children
3. iterate all children and attach an event handler
4. select nav element again
5. select all of its children again
6. iterate all children and attach an event handler again

After the change:

1. select nav element
2. select all of its children
3. iterate all children and attach an event handler
4. iterate all children and attach an another event handler

Thanks for looking yo! By that same logic, could one also:

$('#navPrimary').children().focusin(function() { $(this).addClass('accessibleHover').focusout(function() { $(this).removeClass('accessibleHover');

? Or is that crazy talk?

Adding the response here for posterity.

You'd have a lot of focusout handlers

 $('#navPrimary').children().focusin(function() {
   // You would re-add the `focusout` handler every time `focusin` was called.
   $(this).addClass('accessibleHover').focusout(function() {
     $(this).removeClass('accessibleHover');
   });
 });