・コンテンツの上部にメニューを表示するサンプル。
  position: fixed; で固定位置に表示します。スクロールしても
　メニューは移動しません。
・ボタンやメニュー以外の領域をクリックするとメニューが閉じます。

・:focus 擬似クラスを使用したサンプルです。
  JavaScript を使用しません。

(2015/12-2024/03)
動作     : Edge120, Firefox120, Chrome119

◎ノート (2024)
・:focus 擬似クラスを使うので tabindex が必要です。
  tabindex がないと動作しません。

・details と summary で同じようなことができるか？

・(2024/03)
  2023春から Chrome と Edge で CSS popover が搭載されています。
  こちらで :focus を使わない表示ができます。
  ただし、古いブラウザや Firefox などが対応していません。