導入
ユーザーが要素の上にマウスを移動したときに表示されるドロップダウン メニューを作成します。.
ステップ1) HTMLを追加します。
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>例を説明します。
任意の要素を使用してドロップダウンメニューを開きます。例: <button>、 <a> または <p>.
コンテナ要素（ <div>) をクリックしてドロップダウン メニューを作成し、その中にドロップダウン リンクを追加します。.
要素 <div> ボタンの周りと <div> CSS を使用してドロップダウン メニューが正しく配置されるようにラップします。.
ステップ2) CSSを追加します。
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}例の説明
スライダー ボタンの背景色、パディングなどを設定しました。.
.dropdown クラスは、ドロップダウン コンテンツをドロップダウン ボタンのすぐ下に配置する必要があるときに (position:absolute を使用して)、position:relative を使用します。.
.dropdown-content クラスは、実際のドロップダウンメニューを保持します。デフォルトでは非表示で、フロートモードで表示されます（下記参照）。最小幅は160pxに設定されています。これは自由に変更できます。ヒント：ドロップダウンコンテンツの幅をドロップダウンボタンと同じにしたい場合は、幅を100%に設定してください（小さな画面でスクロールできるようにするには、overflow: auto も設定してください）。.
ドロップダウンメニューを「カード」のように見せるために、境界線の代わりに box-shadow プロパティを使用しています。また、ドロップダウンを他の要素よりも前面に配置するために z-index を使用しています。.
:hover セレクターは、ユーザーがドロップダウン ボタンの上にマウスを移動したときにドロップダウン メニューを表示するために使用されます。.
