我有一个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]访问键
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。