ドロップダウンメニュー

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[親メニュー]

例：サービス

[子メニュー]

3〜6個。例：Web制作、運用サポート、撮影・取材

[使用技術]

例：HTML/CSS/JavaScript、React + Tailwind CSS

あなたはアクセシビリティに詳しいフロントエンドエンジニアです。
以下の条件で「ドロップダウンメニュー」を実装してください。

## 表示内容
- 親メニュー：[親メニュー]
- 子メニュー：[子メニュー]

## 親メニューのデザイン
- 文字 15px、色 #1B2A44。文字の右に下向き矢印（10px、間隔 6px）
- 開いているときは文字色 #1463F0、矢印を180度回転（150ms）

## パネルのデザイン
- 親メニューの真下、8px あけた位置に表示。左端を親メニューの左端に揃える
- 幅は最小 220px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 8px
- 影 0 12px 32px rgba(27,42,68,.12)
- 項目：高さ 44px、左右の padding 12px、角丸 8px、文字 15px、色 #1B2A44
- hover とキーボードのフォーカス時：背景 #EBF2FF、文字色 #1463F0
- 現在のページの項目：文字色 #1463F0、font-weight 700
- 開くときは 150ms でフェードインし、上から 4px だけ動かす
- パネルが画面の右端からはみ出す場合は、右端揃えに切り替える

## 動作
- クリックまたはタップで開閉する。マウスでは hover でも開く
- hover が外れてから 150ms は閉じない（斜めにカーソルを動かしても閉じないようにする）
- パネルの外をクリック・タップするか、Escapeキーで閉じる

## キーボード操作
- Enter / Space で開閉。下矢印キーで開いて最初の項目へ移動
- パネル内は上下の矢印キーで移動、Home / End で最初・最後へ
- Escapeキーで閉じ、フォーカスを親メニューに戻す

## アクセシビリティ
- 親メニューは button 要素。aria-expanded と aria-controls を付ける
- 子メニューは ul / li と a 要素でマークアップし、現在のページには aria-current="page"
- タッチ端末で、hover のスタイルが残り続けないようにする（@media (hover: hover) を使う）
- focus-visible のスタイルを用意する

## 出力形式
- [使用技術]のコードを1つ出力
- 複数の親メニューに使い回せるよう、開閉の処理を共通化する