Para crear un menú desplegable con CSS puedes utilizar el elemento “hover”. Aquí te dejo un ejemplo básico de cómo podrías hacerlo:
HTML:
```html
CSS:
```css
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.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;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
```
En este ejemplo, cuando mueves el cursor sobre el botón del menú, se muestra el menú desplegable. También cambia el color del botón cuando se hace hover con el ratón para indicar que hay más opciones disponibles. Los enlaces en el menú desplegable son estilizados para ser más elegantes con un padding, color de texto negro y sin subrayado. Cuando haces hover sobre estos enlaces, cambian de color de fondo.
Por favor, ten en cuenta que los menús desplegables de CSS no son completamente accesibles; especialmente para aquellos que usan dispositivos de entrada como teclado o lector de pantalla para navegar por la web. Para hacer menús desplegables accesibles, querrás investigar JavaScript y ARIA.
