CSS dropdown menu
CSS Drop-down Menu
Use CSS to create an effect that displays a drop-down menu when the mouse is moved up.
Basic drop-down menu
When the mouse moves over the specified element, a drop-down menu will appear.
Example
PHP中文网（php.cn） 鼠标移动到我这！PHP中文网（php.cn）
m.sbmmt.com
Run the program and try it
Example analysis
HTML part:
We can use any HTM element to open the drop-down menu, such as: , or a
Use a container element (such as
Use
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 screens).
We use the box-shadow attribute to make the drop-down menu look like a "card".
:hover selector is used to display the drop-down menu when the user moves the mouse over the drop-down button.
Drop-down menu
Create a drop-down menu and allow users to select an item in the list. We added a link to the drop-down list and set the style:
PHP中文网(php.cn) 下拉菜单
鼠标移动到按钮上打开下拉菜单。
Run the program to try it
Alignment of drop-down content
leftfloat:left;
rightfloat:right;
##Example
Run the program and try itPHP中文网(php.cn) 下拉内容的对齐方式
left 和 right 属性指定了下拉内容是从左到右或从右到左。
More examples
This example demonstrates how to add a drop-down menu to the navigation bar.PHP中文网(php.cn)
鼠标移动到 "下拉菜单" 链接先显示下拉菜单。
Run the program and try itExample
How to add pictures in the drop-down menu.Run the program and try itPHP中文网（php.cn） 移动鼠标到图片上显示下拉内容。
PHP中文网（php.cn）
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
