$('#navbar ul').addClass('hidden');
   $('#navbar li a').on('focus hover', function(){
    $(this).siblings('ul').toggleClass('hidden');       
}); 

I've posted a JSFiddle of this at: http://jsfiddle.net/karlgroves/HUKUf/

Using the code above I want the submenu items to respond on both focus and hover, however it is not working when focused. Interestingly, the CSS :focus pseudo-class works fine.

EDIT: I say "the CSS :focus pseudo-class works fine" - what I mean to say is that the :focus pseudo class works fine to change the CSS properties, however no method (including using :focus in the selector) does what I intend, which is to show the sub menu items.

Using .focus() doesn't work, either.

• jquery

Correct me if I'm wrong, but I don't remember being able to throw 2 events in via space delimitation in the .on function.

According to the documentation, you should be able to attach multiple events like so:

<script type="text/javascript">
$('#navbar li a').on(
{
  focus: function(){
    $(this).siblings('ul').toggleClass('hidden');
  },
  hover: function(){
    $(this).siblings('ul').toggleClass('hidden');
  }
});
</script>

Somewhat repetitive; but it works.

I believe the code is working, just not how you expect.

    $('#navbar ul').addClass('hidden');
   $('#navbar li a').on('focus hover', function(){
    alert('hey');
    $(this).siblings('ul').toggleClass('hidden');       
}); 

​

When I inserted an alert, it fired twice each time I hovered a child. The fact that it fires twice tells me it is created two distinct functions.

Does not actually seem to be a problem with the event firing...looks more like an issue with traversing the DOM via your selector.

I have forked your fiddle (wow..that just sounds wrong) and you can see the event fires just fine for each focus and hover event if you are grabbing an static element by ID. So it looks like the $(this).siblings('ul') selector just isn't behaving as expected with the focus event. I would look to see what the event.target and event.currentTarget are.

EDIT:

OK...I am re-assessing my former statement. I have changed your code to this:

$('#navbar li a').on('focusin focusout mouseover mouseout', function(event) {
    if (event.type == 'focusin' || event.type == 'mouseover') {
        $(this).siblings('ul').show();
    }
    else {
        $(this).siblings('ul').hide();
    }
});​

and it works fine...so I really think that the issue was just a complex set of interactions between the hover and focus events. Add to that the fact that you have CSS to mimic the hover javascript event (#navbar li:hover ul {display: block;}) and you get even more potential clashes. My updated version of your fiddle is here.