[jQuery] Superfish keyboard access

[Daveshu]

Hello,
I have a minor issue that i've 75% solved, it's just the last little
bit that I'm stuck on & I hoped someone can help - I think I'm doing
something simple wrongly.

Basically, the drop down menus on my site work perfectly with
javascript on.

If I turn java off, the drop down menu still works fine with the
mouse. However, with the tab function from the keyboard it doesn't
show up.....

....BUT! - if I hover the mouse pointer over the "parent" (ie the item
in the main menu under which the drop down menu appears) then the menu
is visible & tabbing does run through the menu.

So I *think* that it's an issue with the tab not triggering the drop
down to show up.

The CSS I'm using at this point is:

#subnavbar {
        background: #EEEEEE;
        width: 920px;
        height: 26px;
        color: #FFFFFF;
        margin: 0px auto 0px;
        padding: 0px 0px 0px 0px;
        }

#subnav {
        margin: 0px;
        padding: 0px;
        list-style: none;
        }

#subnav ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
        }

#subnav a {
        background: #EEEEEE;
        color: #333333;
        display: block;
    font-weight: bold;
    margin: 0px 20px 0px 0px;
        padding: 6px 10px 5px 10px;
        }

#subnav a:hover, #subnav a:active, #subnav a:focus {
        background: #DDDDDD;
        color: #333333;
        display: block;
        text-decoration: none;
    margin: 0px 20px 0px 0px;
        padding: 6px 10px 5px 10px;
        }

#subnav li {
        float: left;
        margin: 0px;
        padding: 0px;
        }

#subnav li a:hover, #subnav li a:active, #subnav li a:focus {
        background: #DDDDDD;
}

#subnav li li {
        float: left;
        margin: 0px;
        padding: 0px;
        width: 160px;
        }


#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
        background: #EEEEEE;
        width: 160px;
        float: none;
        margin: 0px;
        padding: 6px 10px 5px 10px;
        border-bottom: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
        border-right: 1px solid #FFFFFF;
        }

#subnav li li a:hover, #subnav li li a:active, #subnav li li a:focus {
        background: #DDDDDD;
}

.sf-menu ul {
        position:               absolute;
        top:                    -999em;
        width:                  10em; /* left offset of submenus need to match 
(see below)
*/
}

.sf-menu li {
        float:                  left;
        position:               relative;
}


.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
        left:                   0;
        top:                    2em; /* match top ul list item height */
}



and it's in the header.php file like this:

<div id="subnavbar">
        <ul id="subnav" class="sf-menu">
                <?php wp_list_categories('orderby=order&title_li=&depth=2'); ?>

        </ul>
</div>


I've tried fiddling around with a:focus & a:active etc, but it just
doesn't want to know in ie or firefox.

Can anyone help, pleeeeaaassseee??

Many Thanks,
Dave