键盘可访问下拉菜单 – 仅限html / css

我有一个html / css下拉菜单,我试图通过键盘访问但不能让它显示在：焦点

例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>

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

基本上,默认情况下隐藏下拉列表：

#topnav .dropdown { visibility: hidden; }

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

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

我已经尝试添加以下内容以显示父列表项获得焦点时的下拉列表,并且下拉列表显示但我无法选中它.

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

任何人都可以告诉我,是否可以通过键盘只显示这个下拉菜单？

解决方法

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

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

每个浏览器都使用自己的快捷键

> IE,Chrome,Safari,Opera 15：[ALT] accesskey
> Opera先前版本15：[SHIFT] [ESC] accesskey
> Firefox：[ALT] [SHIFT]访问键

因此,您需要在您的网站上为您的用户提及此内容！