Question

我有一个html / css下拉菜单，我试图通过键盘访问，但无法显示：焦点

这是我的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

基本上，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] + accesskey
Opera先前版本15：[SHIFT] [ESC] + accesskey
Firefox：[ALT] [SHIFT] + accesskey

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

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

1 个答案: