On focus, focus on another element jquery

Question

Question:

Why isn't the below code working?

PROBLEM:

I have a menu which consists of drop downs. (Two level navigation / firefox) When I tab through the website it will focus on the first level of the navigation. It won't go down into the individual items of that drop down. When I cycle through with chrome it only cycles through the first two tabs of the menu.

THE CODE I'M TRYING:

$('#cssmenu ul li').focus(function() {
  $('#cssmenu li ul a').focus();
});

LINK OF MENU: http://www.casa.gov.au

Answer 1

To answer the original question, one reason the code you had wasn't working is because the focus event triggers on the <a> tag in the #cssmenu line items, but your were attaching the focus listener to the <li> tags.

This might accomplish the original intent for the focus event, but may not solve the tab skipping issue:

$(function(){
  $('#cssmenu ul li a').focus(function() {
    var parentLi = $(this).parent();
    if(parentLi.find("ul").length > 0){
      parentLi.find("ul li:first a").focus();
    }
  });
});

I tested it out in this jsFiddle http://jsfiddle.net/ryKZu/3/

Answer 2

EDIT : Fixed the selectors

$('#cssmenu > ul > li > a').focus(function () {
    $(this).parent().find('ul li a').first().focus();
});

Try that. Read up on jQuery's selectors: http://api.jquery.com/child-selector/