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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
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!