CSS dropdown menu

Use CSS to create an effect that displays a drop-down menu when the mouse is moved up.

Drop-down menu example:

When the mouse moves over the specified element, a drop-down menu will appear.

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

Create a drop-down menu and allow the user to select an item in the list:

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

Comments:

HTML part:

We can use any HTM element to open the drop-down menu , such as: , or a element.

Use a container element (such as

) to create the content of the drop-down menu and place it wherever you want.

Use

elements to wrap these elements, and use CSS to style the dropdown content.

CSS part: The

.dropdown class uses position:relative, which will set the content of the drop-down menu to be placed in the lower right corner of the drop-down button (using position:absolute). The

.dropdown-content class is the actual drop-down menu. It is hidden by default and will be displayed after the mouse moves to the specified element. Note that the min-width value is set to 160px. You can modify it as you like. Note: If you want to set the drop-down content to be consistent with the width of the drop-down button, you can set width to 100% (the overflow:auto setting can scroll on small screen sizes).

We use the box-shadow attribute to make the drop-down menu look like a "card".

Continuing Learning