Home>Article>Web Front-end> How to implement drop-down menu in css
Method: First use a div element to create the content of the drop-down menu, and set the "display:none" style to hide it; then create an HTML element that opens the drop-down menu; finally use the ":hover" selector to set " display:block" style, used to display the drop-down menu when the mouse moves over the drop-down button.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
HTML part:
We can use any HTML 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 the same width as the drop-down button, 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.
Code:
document 鼠标移动到这里，会出现下拉列表表单一
表单一
Effect:
Recommended learning:css video tutorial
The above is the detailed content of How to implement drop-down menu in css. For more information, please follow other related articles on the PHP Chinese website!