html - 可通过键盘访问的下拉菜单 - 仅限 html/css

Question

我有一个 html/css 下拉菜单，我试图通过键盘访问但无法让它显示在 :focus 上

示例 http://jsfiddle.net/2by45fyx/

这是我的 html。请注意，我已将选项卡索引添加到列表项，以便它可以接收焦点 <li tabindex="0" >

<div id="topnav">
<div class="page">
     <ul>
        <li tabindex="0" ><a href="/">Example 1</a>
            <ul class="dropdown">
                <li><a href="/">Example Page 1a</a></li>
                <li><a href="/">Example Page 2a</a></li>
                <li><a href="/">Example Page 3a</a></li>
            </ul>
        </li>   
        <li tabindex="0" ><a href="/">Example 2</a>
            <ul class="dropdown">
                <li><a href="/">Example Page 1b</a></li>
                <li><a href="/">Example Page 2b</a></li>
            </ul>
        </li>   
    </ul>   
</div>

您可以在示例链接中查看完整的 css http://jsfiddle.net/2by45fyx/

基本上，dropdown是hidden默认情况下:

#topnav .dropdown { visibility: hidden; }

当鼠标悬停时我可以显示它:

#topnav li:hover .dropdown { visibility: visible; }

我尝试添加以下内容以在父列表项获得焦点并且下拉列表确实显示但我无法切换到它时显示下拉列表。

#topnav li:active .dropdown, #topnav li:focus .dropdown { visibility: visible; }

谁能告诉我是否可以只用键盘在这个下拉菜单中切换？

Answer 1

您可以使用 accesskey 属性执行此操作:

请看这里:https://jsfiddle.net/70w6hru9/并根据您使用的浏览器使用下面提到的快捷方式。

每个浏览器都有自己的快捷方式

• IE、Chrome、Safari、Opera 15+:[ALT] + 快捷键
• Opera 之前的版本 15:[SHIFT] [ESC] + accesskey
• Firefox:[ALT] [SHIFT] + 访问键

所以您需要在您的网站上为您的用户提及这一点!