如何创建：可悬停的下拉菜单

学习如何使用 CSS 创建可悬停的下拉菜单。

创建可悬停的下拉菜单

创建一个下拉菜单，当用户将鼠标移动到元素上时显示该菜单。

第一步 - 添加 HTML：

<div class="dropdown">
  <button class="dropbtn">ドロップダウン</button>
  <div class="dropdown-content">
    <a href="#">リンク 1</a>
    <a href="#">リンク 2</a>
    <a href="#">リンク 3</a>
  </div>
</div>

例説明：

使用任何元素打开下拉菜单，例如 <button>、<a> 或 <p> 元素。

使用容器元素（如 <div>）创建下拉菜单，并在其中添加下拉菜单链接。

使用 <div> 元素將按鈕和 <div> 包裝起來，以便使用 CSS 正確定位下拉菜單。

第二步 - 添加 CSS：

/* 下拉按鈕 */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 容器<div> - 用於定位下拉菜單內容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* ドロップダウン内容（デフォルトで非表示） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ドロップダウンメニュー内のリンク */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* マウスオーバー時にドロップダウンメニューのリンクの色を変更 */
.dropdown-content a:hover {background-color: #ddd;}
/* マウスオーバー時にドロップダウンメニューを表示 */
.dropdown:hover .dropdown-content {display: block;}
/* ドロップダウン内容を表示時にドロップダウンボタンの背景色を変更 */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

自分で試してみてください

例説明：

ドロップダウンボタンの背景色、インラインスペースなどにスタイルを設定しています。

.dropdown クラスを使用して position:relativeを使用して、ドロップダウンメニューの内容をドロップダウンボタンの正下方に配置したい場合（ position:absolute）に設定する必要があります。

.dropdown-content クラスは実際のドロップダウンメニューを含んでいます。デフォルトでは非表示で、マウスオーバー時に表示されます（以下を参照）。注意：最小幅は160pxに設定されています。この設定を自由に変更してください。ヒント：ドロップダウンメニューの内容の幅をドロップダウンボタンの幅と同じにしたい場合は、幅を100%（および overflow:auto を使用して小画面上でスクロールを有効にします）。

ボーダーを使用せず、代わりに box-shadow 属性を使用してドロップダウンメニューが「カード」のように見えるようにします。また、 z-index ドロップダウンメニューを他の要素の前に配置します。

:hover ユーザーがマウスをドロップダウンボタンの上に移動した際にドロップダウンメニューを表示するためのセレクターです。

関連ページ

チュートリアル：CSSドロップダウンメニュー：

チュートリアル：クリック可能なドロップダウンメニューを作成する方法：