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