How to implement drop-down menu by html
Editor to share with you how to achieve the html drop-down menu, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
Element to wrap these elements and use CSS to style the drop-down content.
CSS section:
. Dropdown? Class use? Position:relative, which sets the contents of the drop-down menu on the drop-down button (using? The position in the lower right corner of position:absolute).
. Dropdown-content? Class is the actual drop-down menu. It is hidden by default and is displayed after the mouse is moved over the specified element. Be careful? Min-width? Is set to 160px You can modify it as you like.? Note:? If you want to set the drop-down content to match the width of the drop-down button, you can set it? Width? Is 100% (? The overflow:auto setting can be scrolled on a small screen.
We use it? Box-shadow? Property makes the drop-down menu look like a "card".
: hover? The 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 the user to select an item in the list:
Drop-down menu
This example is similar to the previous example, when we added a link to the drop-down list and set the style:
Case study
. 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
Min-width:160px
Box-shadow:0px 8px 16px 0px rgba (0Pert 00.2pm)
}
. Dropdown-content a {
Color:black
Padding:12px 16px
Text-decoration:none
Display:block
}
. Dropdown-content a:hover {background-color:#f1f1f1}
. Dropdown:hover. Dropdown-content {
Display:block
}
. Dropdown:hover .dropbtn {
Background-color:#3e8e41
}
Drop-down content alignment
Float:left
Left
Float:right
Right
If you want to set the right floating drop-down menu from right to left instead of left to right, you can add the following code? Right: 0
Case study
. Dropdown-content {
Right:0
}
The above is all the contents of the article "how to implement the drop-down menu in html". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
