Cómo codificar el menú desplegable

El HTML para un menú desplegable es muy sencillo, es básicamente una lista que contiene una lista anidada. Entonces en el código se vería así

• menu 1
  

  • ¿Cuál es el mejor servidor VPS para empresas medianas con grandes bases de datos?
  • CSS: ¿Por qué los elementos se desplazan entre sí sin tocarse?
  • ¿Elegirías entre prestashop y WordPress u otro CMS para hacer contenidos estáticos en diferentes idiomas?
  • ¿Por qué no hay más personas usando Meteor?
  • ¿Todos los desarrolladores necesitan tener un buen conocimiento en alojamiento de dominios y administración de servidores?
  • menú anidado 1
  • menú anidado 2
  • menú anidado 3
  • menú anidado 4

• menú 2
• menú 3
• menú 4
• menú 5

• menú anidado 5
• menú anidado 6
• menú anidado 7
• menú anidado 8

• menú 6

Ahora, la mayor parte del trabajo se realizará con CSS (hojas de estilo en cascada) y a continuación se muestra un ejemplo rápido de eso:

.menu {
estilo de lista: ninguno;
ancho: 100%;
pantalla: flex;
}
.opción del menú {
pantalla: bloque en línea;
altura de línea: 60 px;
posición: relativa;
relleno-izquierda: 0;
flexión: 1;
cursor: puntero;
}
.menu-nested {
pantalla: ninguno;
posición: absoluta;
arriba: 60px;
relleno-izquierda: 0;
}
.menu-nested .menu-item {
bloqueo de pantalla;
}

.menu-item: hover> .menu-nested {
bloqueo de pantalla;
}

Aquí el enlace del ejemplo de trabajo en jsfiddle – Editar violín – JSFiddle

Esperemos que sea un buen comienzo y que puedas extrapolar desde aquí. Saludos 🙂