Question

我知道某些元素无法接受focus选择器，例如列表元素，但我认为锚点很好。使用以下代码（我创建一个纯css响应下拉菜单），单击锚点时，我无法显示隐藏的ul。

HTML：

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor'>Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="secondarylist">Three</li>
    </ul>
  </li>
</ul>

CSS：

ul.menudrop {
  display: none;
  background-color: white;
}
li.primarylist a:focus + ul.menudrop {
  display: block;
}

的jsfiddle： https://jsfiddle.net/kx0kex7x/

将 jsFiddle 选择器从focus更改为hover，它完美无缺，让我毫无理由怀疑我的语法是否正确。使用active仅在mousedown的持续时间内显示ul。有什么指针吗？（我在Safari 10上工作。似乎可以使用最新的Chrome和FF工作。）

更新

我尝试使用target选择器获得部分成功。如果我更改了a.categor1anchor个链接以匹配每个ul.menudrop新创建的唯一ID，我可以在点击锚点时显示ul.menudrop。但是，这是一个响应式设计，我似乎无法删除其他页面大小的target选择器。例如，在较大的页面尺寸下，我使用的是hover选择器，但较小的屏幕尺寸中的最后一个目标ul.menudrop会在较大的屏幕尺寸下保持打开状态。我无法找到任何方法来清除响应式设计的目标选择器。 Inherit和Initial显示不会影响它。

Answer 1

似乎Safari中的锚标签需要设置tabindex才能获得焦点。

ul.menudrop {
  display: none;
  background-color: white;
}
li.primarylist a:focus + ul.menudrop {
  display: block;
}

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor' tabindex="0">Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="secondarylist">Three</li>
    </ul>
  </li>
</ul>

https://jsfiddle.net/VilleKoo/dhpom1uw/

Answer 2

在研究了过去几天并且在多个途径中进行研究只是为了找到一个稍微复杂的黑客来解决我会找到菜单的每一种情况，我认为它变得更加优雅和干净而只是使用{{ 1}}和我的代码一起处理出现的各种下拉菜单等等。我试图避免它，但我不认为with records as (select 20 as id1, 328 as id2, to_date('2016-11-08','YYYY-MM-DD') as mydate, '01' as myinitial, '01' as myfinal from dual union all select 21 as id1, 328 as id2, to_date('2016-11-11','YYYY-MM-DD') as mydate, '01' as myinitial, '01' as myfinal from dual union all select 53 as id1, 766 as id2, to_date('2016-09-26','YYYY-MM-DD') as mydate, '00' as myinitial, '01' as myfinal from dual union all select 39 as id1, 766 as id2, to_date('2016-11-25','YYYY-MM-DD') as mydate, '01' as myinitial, '00' as myfinal from dual) select * from records where (myinitial = '01' or myfinal = '01') and myinitial <> myfinal union select * from records r where r.myinitial = '01' and r.myfinal = '01' and r.mydate = (select min(r2.mydate) from records r2 where r2.myinitial='01' and r2.myfinal='01' and r2.id2 = r.id2) ;在撰写本文时对于此类菜单仍然非常健壮。

无法在Safari

更新

2 个答案: