键盘友好的CSS菜单

Question

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

键盘可访问的网络下拉菜单？

虽然上述问题说明了这一点

我们想出了如何用键盘快捷键显示菜单,但我不知道如何选择其中一个条目

我已经想出如何使用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>

Answer 1

你不能.

使用accesskey将激活或聚焦链接(取决于浏览器).

一旦链接具有焦点,您可以使用以下内容显示菜单:

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

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

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

我遇到的问题最少的下拉菜单脚本是UDM4,但我通常会尽量避免掉线.