Home > Article > Web Front-end > How to implement drop-down menu in css
How to implement drop-down menu in css
- 醉折花枝作酒筹Original
- 2021-04-22 10:44:2813288browse
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:
<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta charset="utf-8">
<style>
.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(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠标移动到这里，会出现下拉列表</span>
<div class="dropdown-content">
<p>表单一</p>
<p>表单一</p>
</div>
</div>
</body>
</html> 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!