键盘可访问下拉菜单 – 仅限htmlcss

概述我有一个html / css下拉菜单,我试图通过键盘访问但不能让它显示在：焦点 例http://jsfiddle.net/2by45fyx/ 这是我的HTML.请注意,我已经为列表项添加了一个选项卡索引,因此它可以获得焦点< li tabindex =“0”> <div id="topnav"><div class="page"> <ul> <li tabindex=" 我有一个HTML / CSS下拉菜单,我试图通过键盘访问但不能让它显示在：焦点

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

这是我的HTML.请注意,我已经为列表项添加了一个选项卡索引,因此它可以获得焦点< li tabindex =“0”>

<div ID="topnav"><div >     <ul>        <li tabindex="0" ><a href="/">Example 1</a>            <ul >                <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 >                <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]访问键

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

总结

以上是内存溢出为你收集整理的键盘可访问下拉菜单 – 仅限html / css全部内容，希望文章能够帮你解决键盘可访问下拉菜单 – 仅限html / css所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。