CSSのドロップダウンメニュー
ドロップダウン・メニュー・効果に移動マウスが経過すると表示を作成するには、CSSを使用します。
ドロップダウンメニューの例
例デモ1
このチュートリアル
www.w3big.com
例のデモ2
例のデモ3
基本的なドロップダウンメニュー
マウスが指定された要素に移動すると、メニューが表示されますドロップダウンします。
例
.dropdown {
位置：相対;
表示：インラインブロック;
}
.dropdownコンテンツ{
表示：なし;
位置：絶対;
背景色：＃f9f9f9;
分幅：160ピクセル;
ボックスシャドウ：0PX 8px 16pxに0PX RGBA（0,0,0,0.2）。
パディング：12ピクセルに16px;
Zインデックス：1。
}
.dropdown：{.dropdown-コンテンツを置きます
表示：ブロック;
}
</スタイル>
<DIVクラス = "]プルダウン">
私の上の<span>マウス</ span>の
<DIVクラス= "ドロップダウン・コンテンツ 」>
<P>のHello World！</ P>
</ DIV>
</ DIV>
»をお試しください
分析の例
HTML部分：
<スパン>、または<ボタン>要素：私たちは、次のようなドロップダウンメニューを開くには、要素をHTMのいずれかを使用することができます。
コンテナ要素を使用します（例：の<div>）ドロップダウンメニューを作成し、あなたが入れたい任意の場所に配置します。
これらの要素をラップし、ドロップダウンスタイルの内容を設定するためにCSSを使用するには、<div>要素を使用してください。
CSSの一部：
.dropdownクラスが使用するposition:relative 、ドロップダウンメニューの内容を設定します（使用して、ドロップダウンボタンに配置されますposition:absolute右下隅の位置で）。
.dropdown-contentクラスは、実際のドロップダウンメニューです。 デフォルトでは非表示になって、後に指定された要素に移動させ、マウスに表示されます。 ことに注意min-width値を160ピクセルに設定されています。 あなたはそれを自由に変更することができます。 注：ドロップダウンと一貫性のあるブロードバンド・コンテンツのドロップダウンボタンを設定したい場合は、設定width （100％にoverflow:auto設定は、画面の小さいサイズをスクロールすることができます）。
我々は、使用box-shadowプロパティがどのように見えるのドロップダウンメニューができます」カードを。」
:hoverマウスをドロップダウンボタンに移動したときにユーザーのドロップダウンメニュー用のセレクタが表示されます。
ドロップダウンメニュー
ドロップダウンメニューを作成し、ユーザーがリスト内の項目を選択することができます。
我々は、ドロップダウンリスト内のリンクを追加し、スタイルを設定する同様の事例の前述の例：
例
/ *スタイルのドロップダウンボタン* /
.dropbtn {
背景色：＃4CAF50。
色：白;
パディング：16pxに;
フォントサイズ：16pxに;
国境：なし;
カーソル：ポインタ;
}
/ *コンテナの<div> -ドロップダウンの内容を検索する必要があります* /
.dropdown {
位置：相対;
表示：インラインブロック;
}
/ *プルダウンコンテンツ（デフォルトでは非表示）* /
.dropdownコンテンツ{
表示：なし;
位置：絶対;
背景色：＃f9f9f9;
分幅：160ピクセル;
ボックスシャドウ：0PX 8px 16pxに0PX RGBA（0,0,0,0.2）。
}
/ *リンク]ドロップダウンメニュー* /
.dropdownコンテンツ{
色：黒;
パディング：12ピクセルに16px;
テキスト装飾：なし;
表示：ブロック;
}
/ *編集]ドロップダウンメニューホバーリンクの色に続いて* /
.dropdown-内容：ホバー{背景 -color：f1f1f1＃}
/ * [表示]ドロップダウンメニューのホバー後* /
.dropdown：{.dropdown-コンテンツを置きます
表示：ブロック;
}
/ *ドロップダウンボタンの後にドロップダウンの内容が変更された背景色が表示されます* /
.dropdown：{.dropbtnホバー
背景色：＃3e8e41。
}
</スタイル>
<DIVクラス = "]プルダウン">
<Buttonクラス= "dropbtn"> ドロップダウンメニュー </ button>の
<DIVクラス= "ドロップダウン・コンテンツ 」>
<Aの HREF = "#"> このチュートリアル1 </ A>
<Aの HREF = "#"> このチュートリアル2 </ A>
<Aの HREF = "#"> このチュートリアル3 </ A>
</ DIV>
</ DIV>
»をお試しください
アライメントドロップダウンコンテンツ
フロート：左;
フロート：右;
あなたは右のコンテンツを左の代わりに右に右から左に浮遊ドロップダウンメニューを設定する場合は、次のコードを追加することができますright: 0;
より多くの例
画像のドロップダウン
この例では、どのようにプルダウンメニューの画像を追加する方法を示します。
ナビゲーションをドロップダウン
この例では、ナビゲーションバーのドロップダウンメニューを追加する方法を示します。