To create a drop-down button in CSS, you will typically also use HTML and sometimes JavaScript for interactivity. Here is a simple example:
HTML:
```
CSS:
```
.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);
z-index: 1;
}
.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;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
```
In this example, we’re creating a button that, when hovered over, will display a drop-down menu with three links. The “” elements are the items in the drop-down menu. The button and the drop-down are contained in a “ Please note that this is a basic example. Depending on the complexity and requirements of your project, you may need to add additional styles or functionality with JavaScript.” element with class “dropdown”. With CSS, the “.dropdown-content” class is given a “display: none” style initially but is changed to “display: block” when the parent “.dropdown” is hovered.
Finally, styles for the “.dropbtn” class are given for styling the appearance of the button.
Simply generate articles to optimize your SEO