CSS ドロップダウン

CSS で ホバーのできるドロップダウンを作成します。

デモ：ドロップダウンの例

下の例の上にマウスを移動してください：

Dropdown Text

Hello World!

Dropdown Menu

Link 1 Link 2 Link 3

Other:

Beautiful Trolltunga, Norway

基本的なドロップダウン

ユーザが、要素の上にマウスを移動したときに表示される、ドロップダウンボックスを作成します。

例の説明

HTML) ドロップダウンコンテンツを開くために、或る要素、例えば <span> とか <button> 要素を使用します。

ドロップダウン・コンテンツを作成し、その中に必要なものを追加するために、コンテナ要素（例えば <div>）を使用します。

CSS により正しくドロップダウン・コンテンツを配置するために、要素の周りを <div> 要素でラップします。

CSS).dropdown クラスは、(position:absoluteを使用することで) ドロップダウン・ボタンの右下に ドロップダウンコ・ンテンツを配置したいために、position:relative を使用します 。

.dropdown-content クラスには、実際のドロップダウンのコンテンツが含まれています。 これは、デフォルトでは非表示でホバリング時に表示されます（下記参照）。 min-width は、160 ピクセルに設定されていることに注意してください。自由に変更してください。 チップ: ドロップダウン・コンテンツの幅をドロップダウン・ボタンと同じ幅にしたい場合は、 width に 100% を（そして、小型画面でのスクロールを可能にするために overflow:auto を）を設定します。

ボーダーを使う代わりに、ドロップダウンメニューが「カード」のように見えるようにするため、CSS3 box-shadow プロパティを使用しています。

:hover セレクタは、ユーザがドロップダウン・ボタンの上にマウスを移動したときに、ドロップダウン・メニューを 表示するために使用しています。

ドロップダウンメニュー

リストからオプションを選択することを可能にするドロップダウンメニューを作成します：

この例は、ドロップダウンボックス内へのリンクの追加と、スタイル済のドロップダウン・ボタンに合わせてスタイルをすることを除き、 前のものと同じです：

ドロップダウン・コンテンツの右揃え

左にあるドロップダウンメニューを右にしたい場合、left に代えて right にして、right: 0; を追加します：

その他の例

ドロップダウン・イメージ
この例は、ドロップダウンボックス内の画像やその他のコンテンツを追加する方法のデモです。

ドロップダウン・ナビゲーションバー
この例は、ナビゲーションバーの内側にドロップダウンメニューを追加する方法のデモです。