【CSS4】:focus-withinでクリックタイプのドロップダウンメニュー？

:hoverを使ったドロップダウンメニューは既にCSSのみで実装可能。
子要素の:hoverは親要素まで伝播するので、メニューにカーソルが重なっている間は親要素の:hover状態が保持される。
でもこれって割と使いづらくね？　ちょっとでもカーソル外れるとメニュー消えるし。
そもそも今の時代、スマホ端末で意味をなさない:hoverはちょっと……
クリックでオープンしてメニューの外をクリックしたら勝手に閉じるやつ、実装したいなあ……CSSのみで。

dropdown.html

<div tabindex="-1" class="dropdown">めにう
  <ul>
    <li><a href="/hoge">hoge</a></li>
    <li><a href="/fuga">fuga</a></li>
    <li><a href="/piyo">piyo</a></li>
  </ul>
</div>

focus.css

.dropdown > ul {
  display: none;
}
.dropdown:focus > ul {
  display: block;
}

:focusだとめにう内の項目をクリックした時点でフォーカスが外れてリンクが上手く機能しない……

というわけで、Selectors Level 4 ではこんな擬似クラスが

focus-within.css

.dropdown > ul {
  display: none;
}
.dropdown:focus-within > ul {
  display: block;
}

:focus-withinだと多分、いい感じにバブルアップしたフォーカスをキャッチしてくれるんじゃないかと！（希望）
これはjavascriptの focusin/focusout イベントに相当する擬似クラスという事かな。
https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo

果たして現場で使えるようになる日はいつなのか。