1

我有一个 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;
}
4

1 回答 1

0

If you don't have the ability to access the html and manually add a tabindex, or it is dynamically generated every time, you can use Javascript to add a tabindex to the li elements (this is with jQuery):

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

or regular 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;
        }
    }
}

If you can't add a tabindex, I don't believe there is any other way to focus on the li

EDIT 9/21/13

This is not perfect, but it would be usable for keyboard only.

JS Fiddle

For it to work, you can't have a sub-ul that contains the li's with anchors; the anchors must be siblings. This solution uses the ~ selector, which unfortunately only applies to siblings after the targeted element, so it makes the anchors before the focused one disapear.

于 2013-09-16T20:44:49.947 回答