どのように作成するか：ドロップダウンメニュー

CSSを使用してドロップダウンメニューを作成する方法を学びます。

ホバードロップダウンメニューの作成

ユーザーが要素にマウスをオーバーすると表示されるドロップダウンメニューを作成します。

第1ステップ - HTMLを追加：

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

例説明：

ドロップダウンメニューを開くには、<button>、<a>、または<p>要素などのどの要素でも使用できます。

コンテナ要素（例：<div>）を使用してドロップダウンメニューを作成し、その中にドロップダウンリンクを追加します。

<div>要素を使用して、ボタンと<div>を囲んで、CSSで正確にドロップダウンメニューを配置します。

第2ステップ - CSSを追加：

/* ドロップダウンボタン */
.dropbtn {
  背景色: #3498DB;
  色: 白;
  パディング: 16px;
  フォントサイズ: 16px;
  border: none;
}
/* 容器 <div> - 上拉メニュー内容の位置を決定するために必要な要素 */
.dropup {
  position: relative;
  display: inline-block;
}
/* 上拉メニューの内容（デフォルトで非表示） */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉メニュー内のリンク */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* マウスオーバー時の下拉リンクの色を変更 */
.dropup-content a:hover {background-color: #ddd}
/* マウスオーバー時には上拉メニューを表示 */
.dropup:hover .dropup-content {
  display: block;
}
/* 上拉メニューの内容が表示されたとき、上拉ボタンの背景色を変更 */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

実際に試してみてください

例説明：

上拉ボタンの背景色、インラインスペースなど、スタイルを設定しています。

.dropup クラスを使用して position:relative、上拉メニューの内容を上拉ボタンの上に配置したい場合には（ position:absolute），これは必要です。

.dropup-content クラスには実際の上拉メニューが含まれています。デフォルトでは非表示で、マウスオーバー時には表示されます（以下を参照）。注意：最小幅は160pxに設定されています。必要に応じてこの値を変更できます。ヒント：上拉メニューの内容の幅を上拉ボタンの幅と同じにしたい場合は、幅を100%（小画面では）に設定してください（これは必須です）。 overflow:auto スクロールを有効にするために使用しています）。

ボーダーを使用せず、 box-shadow 属性を使用して、上拉メニューが「カード」のように見えるようにしています。また、 z-index 上拉メニューを他の要素の前に配置してください。

:hover ユーザーがドロップダウンボタンにマウスをオーバーすると、ドロップダウンメニューを表示するセレクターを使用します。