html - CSS Focus 可通过 :focus with no JS 访问下拉菜单

Question

我正在尝试用纯 CSS 创建一个可访问的下拉菜单，但我不太确定该怎么做。

如果 anchor 处于事件状态，我可以获得下一个 UL(子菜单)，但是一旦进入子菜单，聚焦第一个链接，我不确定如何告诉 anchor 父 UL 保持打开状态(子菜单保持打开状态)。我在堆栈上看到的先前答案都需要 javascript 才能工作，而我试图避免(在禁用 JS 的情况下)。

为了使 UL.submenu 显示在焦点上，我可以做一些类似 a:focus + ul 的事情来显示下一个 UL 但同样，在里面我不是确定要做什么，这是我的例子:

http://jsfiddle.net/cq9rxunz/

在我的搜索中，我确实找到了另一个示例，它的工作方式与您预期的完全一样，但在查看代码后我不确定它是如何工作的。这是一个工作示例:

http://jsfiddle.net/cfWpE/

现在总而言之，我正在尝试在不使用 javascript 的情况下实现这一目标，任何提示/帮助将不胜感激。

Answer 1

您发送的示例的技巧是 float 元素的溢出。当您有 float 元素并且它们的外部宽度总和大于容器内部宽度时，浏览器会“换行”并且一些元素会转到“下一行”。

根链接及其子菜单完全适合它们的 LI 父级，直到其中一个收到 margin-right(这是由 :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;

}

发生这种情况时，子菜单将移动到根 LI 的“第二行”(链接下方)。

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

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

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

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

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

这很聪明!