键盘友好的CSS菜单

我的问题是这个问题的续篇

而上述问题说明,

我们想出了如何显示菜单 用键盘快捷键，但我不是 确定如何选择其中一个条目吗

我已经知道如何使用accesskeys（并在键字母下面加下划线）选择单个菜单项，但我不知道如何在按键时弹出菜单

该菜单是一个仅限于XHTML/CSS的菜单，XHTML是

<ul>
    <li>Menu 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

菜单1

项目1
项目2
项目3


菜单2

项目1
项目2
项目3

你不能

使用accesskey将激活或聚焦链接（取决于浏览器）

一旦链接具有焦点，您可以在菜单中显示如下内容：

ul#mainMenu > li > a:focus + ul { display: block }

但是你将无法与菜单中的任何内容进行交互，因为一旦焦点移开，它就会消失

CSS是一个很好的描述表示的工具——这就是它的设计目的——它是一个很差的描述交互逻辑的工具。JavaScript就是为此而设计的，所以请使用合适的工具来完成这项工作

---

我遇到的最不成问题的下拉菜单脚本是，但我通常会这样做。

Spudley:focus不像hover那样工作的原因是，hover操作被分配给了包含链接的ul或li。弹出菜单是该ul/li中的一个子菜单，因此您仍将鼠标悬停在ul/li中的一个元素上。焦点只能放在键盘交互对象上，如链接和表单字段。这意味着当链接有焦点时，您可以使用Quentin提到的CSS3选择器显示菜单，但菜单不是锚标记的子菜单，为了使其成为子菜单，您的子菜单必须位于标记的内部。正如您可能想象的那样，这将导致子菜单内的链接出现问题。尝试将悬停标记放在a上而不是包含a的元素上，您将得到与focus方法相同的结果

---

昆汀：我目前正在研究的一个原因是响应性设计和可访问性的结合。我的菜单以全屏大小完全展开，但当你缩小屏幕时，菜单会变成页面上的一个小按钮，在悬停/聚焦上展开，以节省手机/手机屏幕上的屏幕空间。我还试图避免使用javascript，并根据可访问性要求使其可通过键盘访问。我不认为有一种方法可以做到这一点，因为现在你列出的原因。所以我的退路是使用javascript隐藏菜单和显示，当它未启用时，始终显示菜单。对于移动用户来说，用户友好程度较低（禁用js），但他们仍然可以访问所有内容以满足可访问性要求。

我对此给出了+1，但我怀疑一旦焦点转移，菜单就会消失。这是正确的，但是悬停也是正确的；“悬停”之所以适用于CSS下拉菜单，是因为下拉菜单项是父菜单项的子元素，因此在选择子项时，父菜单项上的悬停保持不变。我希望

focus

也能以同样的方式工作？在这种情况下，它应该可以通过键盘访问。也就是说，我实际上还没有尝试过，但如果它不起作用，我很想知道原因。你可以同时指向两个元素（因为一个元素可以包含另一个元素），但焦点只能由一个元素控制。