使用键盘访问时，焦点上的 CSS 下拉菜单消失

Question

我有一个 CSS 下拉菜单，它出现在鼠标悬停或键盘焦点上，虽然下拉菜单可以用鼠标访问，但当你尝试用键盘访问它时，下拉菜单消失了(但你仍然循环浏览元素)。

有人知道如何在使用键盘访问下拉菜单项时使下拉菜单可见吗？ CSS 代码如下。

您可以访问演示:http://testingtesting1.info/joomla-test/

HTML 代码由 Joomla 生成。

/* Parent menu items */
.h-nav {
    width:720px;
    height:90px;
}
.h-nav ul {
    left:0;
}
.h-nav li {
    display:block;
    list-style:none;
    position:relative;
    float:left;
    margin-right:10px;
}
.h-nav a {
    display:block;
    padding:33px 24px;
    margin:0;
    float:left;

}
.h-nav li a:hover, 
.h-nav li a:focus {
    background-color:#ffbb58;
}
.h-nav li.parent {
    background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
    text-align:left;
}

.h-nav li li a:hover,
.h-nav li li a:focus {
    text-decoration:underline; 
    background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
    margin:4px auto;
    position:absolute;
    margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
    text-align:left;
    padding:10px 5px;
    width:220px;
    background:url("../../images/standard/bg-submenu.png") repeat;
    z-index:9999;
    /*rounded corners - rounding only bottom corners */
    border-bottom-right-radius:10px 10px;
    border-bottom-left-radius:10px 10px;
    -moz-border-bottom-right-radius:10px 10px;
    -webkit-border-bottom-left-radius:10px 10px;    
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
    margin:auto;
    top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
    display:block;  
    padding:2px 25px;
}

Answer 1

如果你没有能力访问html并手动添加一个tabindex，或者每次都是动态生成的，你可以使用Javascript添加一个tabindex 到 li 元素(这是用 jQuery 实现的):

$(document).ready(function(){
    $('.h-nav>li').attr('tabindex',0);
});

或常规 Javascript:

window.onload=function(){
    menu = document.getElementById("h-nav")
    navElems = menu.getElementsByTagName('li');
    for(e = 0; e < navElems.length; e++){
        if(navElems[e].parentNode == menu){
            navElems[e].tabIndex = 0;
        }
    }
}

如果你不能添加一个tabindex，我不相信有任何其他方法可以专注于li

编辑 2013 年 9 月 21 日

这并不完美，但它仅可用于键盘。

JS Fiddle

为了让它工作，你不能有一个包含 li 和 anchor 的子 ul； anchor 必须是 sibling 。此解决方案使用 ~ 选择器，不幸的是，它仅适用于目标元素之后的同级元素，因此它使焦点元素之前的 anchor 消失。