CSSだけで実装できるシンプルなドロップダウンメニューのテクニックです。ホバーやフォーカスでメニューを表示し、ナビゲーションやアクションリストに使えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
メニュー本体はボタンの直下に position: absolute で配置し、通常は display: none で隠しておきます。親要素の :hover と :focus-within で表示を切り替えるため、マウスでもキーボード（Tabでボタンやメニュー項目にフォーカスした状態）でも開けます。top: 110% でボタンとの間にわずかな隙間を作り、z-index で他要素より手前に重ねています。
親要素に:hoverや:focus-withinを使うことで、CSSだけでメニューの表示/非表示を制御できます。本格的な運用ではaria-expandedの更新やEscで閉じる操作の追加を推奨します（ドロワーメニューのレシピも参考に）。
CSSだけで動くドロップダウンメニューを作ってください。position: absoluteでボタン直下に配置し、親要素の:hoverと:focus-withinで表示を切り替え、キーボードのTab操作でも開けるようにしてください。