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

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!

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.