使用CSS显示下拉焦点的正确方法

Question

我正在尝试制作一个键盘可访问的菜单，但我无法弄清楚如何让它显示焦点下拉。

我有

.main-menu li:hover ul,
.main-menu li:focus ul {
    display: block;
}

问题在于，当它把注意力集中在那个嵌套在li上而没有显示ul的时候。 Tabbing专注于标签。

以下是我的完整代码：http://jsfiddle.net/bxpe4/

Answer 1

选项卡时，您将anchor放在.main-menu li内，而不是list-item本身。

有两种解决方法：

a）使用+选择器

.main-menu li a:focus + ul {
    display: block;
}

然而，这使得Tab键到其他锚点会有问题（在标签上按下，它应该转到子菜单中的第一个锚点，但它会被取消显示，所以没有任何反应）。

b）使用tabindex属性

这将要求您将菜单锚点上的tabindex设置为负值（从标签中删除它们）并将标签设置为列表项。

see Using tabindex demo

您需要更改锚点和列表项的样式以显示红色背景，添加新的选择器：

.main-menu li a:hover,
.main-menu li a:focus,
.main-menu li.dropped > a,
.main-menu li:focus > a /* this one was added */ {
    /* your styles */
}

然而，这并不是一个好习惯，因为聚焦列表项意味着您无法使用键盘访问锚点。您可以使用JavaScript来模拟事件（绑定按键列表项以单击锚点），在jQuery中它将是这样的：

$('li[tabindex]').on('keypress', function() {
    $(this).find('a').click();
});

see Using tabindex with event simulation demo

如果顶级锚点没有任何操作（仅用于下拉式purpouse），这不是问题，在这种情况下你根本不需要它们。

Answer 2

此处可能使用的另一个属性是:focus-within。因此，如果您执行以下操作，那么它也应该起作用。

.main-menu li:hover ul,
.main-menu li:focus-within ul {
    display: block;
}

focus-within伪类不仅关心当前元素，还关心它的所有子元素。我认为这是解决此问题的一种非常干净的解决方案，并且可以解决我的问题。