Cómo crear un menú desplegable a través de html y css
A continuación, debemos agregar una etiqueta DIV al cuerpo y usar la lista desordenada ul y la etiqueta li para crear una barra de menú de primer nivel. El código y los efectos del navegador se muestran en las dos imágenes siguientes.
Debido a que la barra de menú generalmente está vinculada, debemos agregar una etiqueta A a cada etiqueta li y agregar un estilo apropiado. De esta manera, cuando el mouse se mueva sobre el enlace, habrá un cambio de color obvio.
A partir del paso anterior, nuestra barra de menú de primer nivel se ha completado y a continuación necesitamos crear una barra de menú de segundo nivel. Podemos crear un menú secundario agregando ul debajo de la etiqueta li de la barra de menú de primer nivel con una barra de menú secundaria y luego agregando la etiqueta li.
El código y el estilo CSS del menú secundario, así como el efecto de visualización en el navegador, se muestran en la siguiente figura.
Como puedes ver, este es un menú secundario estático, y el menú secundario siempre se mostrará en la página web. Entonces, ¿cómo lo ocultamos primero y luego deslizamos el mouse sobre el menú principal antes de mostrarlo?
De hecho, solo necesitamos configurar los atributos none y block mostrados para la etiqueta ul del menú secundario. De forma predeterminada, el atributo de visualización del ul auxiliar se establece en ninguno cuando se desplaza el mouse, el atributo de visualización es bloque.
Este menú secundario está completo. Si queremos que otros menús de primer nivel muestren menús de segundo nivel debajo, solo necesitamos copiar el código correspondiente.