Question

我正在尝试在纯CSS中创建一个可访问的下拉菜单，但我不太清楚如何做到这一点。

如果锚点处于活动状态，我可以获得下一个UL（子菜单）但是一旦进入子菜单，聚焦第一个链接，我不知道如何告诉锚点父级UL保持打开状态（子菜单保持打开状态）。我已经看到的堆栈上的先前答案都需要javascript才能工作，我正在努力避免（在JS被禁用的情况下）。

要使UL.submenu显示焦点，我可以执行类似a:focus + ul的操作来显示下一个UL但是再次，我不知道该怎么做，这是我的例子：

http://jsfiddle.net/cq9rxunz/

在我的搜索中，我确实找到了另一个与你期望的完全一样的例子，但在查看代码后我不确定它是如何工作的。这是一个有效的例子：

http://jsfiddle.net/cfWpE/

现在总而言之，我试图在不使用javascript的情况下实现这一点，任何提示/帮助都会感激不尽。

Answer 1

您发送的示例的技巧是浮动元素的溢出。当你有浮动元素并且它们的外部宽度的总和大于容器内部宽度时，浏览器会打破这条线“＆＃39;并且有些元素会转到下一行＆＃39;。

根链接及其子菜单恰好适合其LI父级，直到其中一个接收到右边距（这是由：focus伪选择器触发）：

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
    background:#900;
    margin-right:1px;
    color:#fff;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
    margin-right:1px;
    background: black;

}

当发生这种情况时，子菜单将移至第二行＆＃39;根LI（链接下方）。

子菜单永远不会隐藏或display:none它始终存在但由于根LI margin-top而位于可见区域之上：

ul.menu li.list {
    ...
    margin:-32767px -125px 0px 0px;
    ...
}

链接是可见的，因为它有自己的margin-top来修复它的父级：

ul.menu li.list a.category {
    ...
    margin-top:32767px;
    ...
}

除了隐藏/显示技巧外，它还使用zIndex使子菜单项保持颜色，同时子菜单可见。

这非常聪明！

CSS Focus Accessible下拉通过：没有JS的焦点

1 个答案: