# シンプルなドロップダウンメニューのCSS実装

> CSSだけで実装できるシンプルなドロップダウンメニューのテクニックです。ホバーやフォーカスでメニューを表示し、ナビゲーションやアクションリストに使えます。

- カテゴリ: ナビゲーション
- URL: https://www.css-dictionary.com/recipes/simple-dropdown-menu/

## HTML

```html
<div class="dropdown">
  <button class="dropdown-btn">メニュー ▼</button>
  <ul class="dropdown-menu">
    <li><a href="#">プロフィール</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</div>
```

## CSS

```css
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  padding: 0.5em 1.5em;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5em;
  background: #97362f;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-btn:hover,
.dropdown-btn:focus {
  background: #7d2d28;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 0.5em;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.08);
  z-index: 10;
  padding: 0.5em 0;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu a {
  display: block;
  padding: 0.5em 1.5em;
  color: #5c5445;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border-radius: 0.25em;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: #97362f;
  color: #fff;
}
```

## 仕組みの解説

メニュー本体はボタンの直下に position: absolute で配置し、通常は display: none で隠しておきます。親要素の :hover と :focus-within で表示を切り替えるため、マウスでもキーボード（Tabでボタンやメニュー項目にフォーカスした状態）でも開けます。top: 110% でボタンとの間にわずかな隙間を作り、z-index で他要素より手前に重ねています。

## 実装のポイント

親要素に:hoverや:focus-withinを使うことで、CSSだけでメニューの表示/非表示を制御できます。本格的な運用ではaria-expandedの更新やEscで閉じる操作の追加を推奨します（ドロワーメニューのレシピも参考に）。

## AIに依頼するときの文例

CSSだけで動くドロップダウンメニューを作ってください。position: absoluteでボタン直下に配置し、親要素の:hoverと:focus-withinで表示を切り替え、キーボードのTab操作でも開けるようにしてください。

## 使っているプロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [display](https://www.css-dictionary.com/property/display.md)
- [z-index](https://www.css-dictionary.com/property/z-index.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)
- [pseudo-focus-within](https://www.css-dictionary.com/property/pseudo-focus-within.md)