CSSドロップダウンメニュー

CSS を使用して、マウスを上に移動したときにドロップダウン メニューを表示するエフェクトを作成します。

ドロップダウン メニューの例:

マウスを指定した要素の上に移動すると、ドロップダウン メニューが表示されます。

       
 
 
菜单一 
 
子菜单1
 
子菜单2 
子菜单7
 
 
子菜单3
 
 
 
菜单二 
 
子菜单4
 
子菜单5
 
子菜单6
 
 
 
 
  

ドロップダウン メニューを作成し、ユーザーがリスト内の項目を選択できるようにします:

       
 下拉菜单 
 菜单栏 1 菜单栏 2 菜单栏 3 
 
  

注:

HTML 部分:使用できますドロップダウン メニューを開くための任意の H TM 要素 (など)、または要素。

コンテナ要素 (

など) を使用してドロップダウン メニューのコンテンツを作成し、任意の場所に配置します。

要素を使用してこれらの要素をラップし、CSS を使用してドロップダウン コンテンツのスタイルを設定します。

CSS 部分:

.dropdown クラスは、position:relative を使用します。これにより、ドロップダウン メニューのコンテンツがドロップダウン ボタンの右下隅に配置されるように設定されます (position:absolute を使用)。

.dropdown-content クラスは、実際のドロップダウン メニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 min-width 値が 160px に設定されていることに注意してください。好みに応じて変更できます。注: ドロップダウン コンテンツをドロップダウン ボタンの幅と一致するように設定したい場合は、幅を 100% に設定できます (overflow:auto 設定により、小さな画面サイズでもスクロールできます)。

box-shadow 属性を使用して、ドロップダウン メニューを「カード」のように見せます。