Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.