css - 辅助功能菜单 - 打开焦点菜单

Question

我的网站有菜单和子菜单

我的问题是当我通过选项卡聚焦到菜单时，菜单打开就像我用鼠标悬停在菜单上一样。 但是当我继续使用选项卡的子菜单元素时，菜单关闭。

如果某些子元素获得焦点，我如何保持菜单打开。

当然我可以通过 javascript 来做，但我想知道我是否可以只用 css 来做。

这里是示例(尝试使用“标签”转到链接)

li.main{
  
  float:left;
  width:200px;
}
li .sub{
  display:none;
  }
li:hover .sub{
  display:block
    }

li.main:focus .sub{
   display:block
    }

<ul>
    <li class="main"  tabindex="0">
    First menu
    <div class='sub'>
      <ul>
        <li><a href="#">First Link</a> </li>
         <li><a href="#">Second Link</a> </li>
        </ul>
      </div>
    </li> <li class="main"  tabindex="0">
    Second menu
    <div class='sub'>
      <ul>
       <li><a href="#">Third Link</a> </li>
         <li><a href="#">Forth Link</a> </li>
        </ul>
      </div>
    </li>
   </ul>

Answer 1

以 CSS 的当前可能性，您不能，因为之前在很多问题中都讨论过(例如，参见 accessible css dropdown menu)。

首先，您不能在这种方法中使用“display:none”，因为无法使用下一个链接快捷方式(大多数浏览器实现中的 Tab 键)访问链接。

有效的解决方案将暗示诸如定位在屏幕外的解决方案。它会将屏幕上的 View 限制为当前链接，因为 CSS 中没有 parent() 选择器，或者您可以使用上面线程中的技巧(这将在某些浏览器中工作并限制下拉部分的宽度)。

但无论采用何种解决方案，都无法解决主要问题:下拉菜单不是实现可访问性的最佳方式。

例如，使用眼动追踪软件的残障人士永远不会从下拉菜单中受益。人们也不会使用平板电脑。

总是有些难以使用，难以理解:如果我点击类别链接怎么办？它是打开类别主页，还是打开子菜单？

如果您真的想要一个可访问的菜单，请不要使用下拉菜单