Crear un botón desplegable en CSS requiere convolució mucho del HTML, ya que CSS se encarga sobre todo del estilo y apariencia de los elementos de la página web. Aquí hay un ejemplo simple de cómo podrías hacer esto.
HTML:
```html
CSS:
```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:hover .dropdown-content {display: block;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
```
Este ejemplo crea un botón “Dropdown” simple que, cuando se pasa el ratón sobre él, muestra tres enlaces (“Link 1”, “Link 2”, “Link 3”). Los estilos CSS se encargan de todo, desde la apariencia del botón y el contenido desplegable hasta el cambio de apariencia cuando se pasa el ratón sobre el botón.
