How to use pure CSS to realize the drop-down menu after the mouse is passed over
This article mainly introduces how to use pure CSS to achieve the mouse after the emergence of a drop-down menu, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.
HTML section:
1. We can use any HTML element to open the drop-down menu, such as: or an element
2. Use container elements (for example) to create the contents of the drop-down menu and put it wherever you want.
3. Use elements to wrap them, and use CSS to style the drop-down content.
CSS section:
1. Dropdown uses position:relative, which places the contents of the set drop-down menu in the lower-right corner of the drop-down button (using position:absolute).
2. Dropdown-content is the actual drop-down menu. It is hidden by default and is displayed after the mouse is moved over the specified element. Note: if you want to set the drop-down content to match the width of the drop-down button, you can set width to 100%.
3. The hover selector is used to display the drop-down menu when you move the mouse over the drop-down button.
Example: use pure CSS to make a navigation drop-down menu, which appears when the mouse passes over
HTML Code:
Pure CSS enables the mouse to move over the button to open the drop-down menu.
Drop-down menu
Menu 1
Menu 2
Menu 3
CSS section:
.dropbtn {
Background-color:#4CAF50
Color:white
Padding:16px
Font-size:16px
Border:none
Cursor:pointer
}
.dropdown {
Position:relative
Display:inline-block
}
. dropdown-content {
Display:none
Position:absolute
Background-color:#f9f9f9
Width:100%
Box-shadow:0px8px16px0pxrgba (0Pert 00.2pm)
}
. dropdown-contenta {
Color:black
Padding:12px16px
Text-decoration:none
Display:block
}
. dropdown-contenta:hover {
Background-color:#f1f1f1
}
. dropdown:hover.dropdown-content {
Display:block
}
.dropdown: hover.dropbtn {
Background-color:#3e8e41
}
Thank you for reading this article carefully. I hope the article "how to use pure CSS to achieve a drop-down menu after the mouse" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
