css - 键盘友好的 CSS 菜单

Question

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

Keyboard accessible web dropdown menus?

虽然上述问题表明

We figured out how to show the menu with a keyboard shortcut, but I'm not sure how to select one of the entries

我已经弄清楚如何使用访问键选择单个菜单项(并通过在键字母下划线)，但我不知道如何在按键时弹出菜单。

菜单是一个仅 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>

Answer 1

你不能。

使用快捷键将激活或聚焦链接(取决于浏览器)。

一旦链接获得焦点，您就可以显示菜单，如下所示:

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

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

CSS 是一个很好的描述表示的工具——这就是它的设计目的——但它是一个非常糟糕的描述交互逻辑的工具。 JavaScript 就是为此而设计的，因此请使用正确的工具来完成这项工作。

我遇到的问题最少的下拉菜单脚本是 UDM4但我通常会 try to avoid drop downs entirely .