Question

在我的网站中我有菜单和子菜单

我的问题是当我将标签按到菜单时，菜单打开就像我用鼠标悬停菜单一样。但是当我继续使用标签的子菜单元素时，菜单关闭。

如果某些子元素被聚焦，我怎么能保持菜单打开。

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

这是示例（尝试使用＆＃39;标签链接＆＃39;）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据CSS的当前可能性，您不能，因为之前在很多问题中已经讨论过（例如，请参阅accessible css dropdown menu）。

首先，你不能使用＆＃34; display：none＆＃34;在这种方法中，因为无法使用下一个链接快捷方式访问链接（大多数浏览器实现中的Tab键）。

有效的解决方案将意味着屏幕外定位等解决方案。它将屏幕上的视图限制为当前链接，因为CSS中没有parent（）选择器，或者您可能使用上述线程中的技巧（这将在某些浏览器中起作用并限制下拉部分的宽度）。

但无论解决方案如何，它都无法解决主要问题：下拉菜单不是实现辅助功能的最佳方式。

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

总是难以理解，难以理解：如果点击类别链接怎么办？它是打开类别主页面还是打开子菜单？

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

辅助功能菜单 - 焦点上的打开菜单

1 个答案: