[jQuery] Superfish keyboard access
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