Tomemos otro ejemplo que alguien dijo hoy: menú desplegable CSS puro:
Diagrama de reproducción
La implementación de esto es muy simple, principalmente: el uso de la transición de atributos de transición y transición.
Código:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margin: 0; relleno: 0; tamaño de fuente: 16px; Font-Family: "Microsoft Yahei"; } #Container {ancho: 100px; margen: 0 auto; Text-Align: Center; Posición: relativo; } #Container ul {list-style: none; } #Container Span {Display: Inline-Block; Ancho: 100px; Altura: 30px; Línea de altura: 30px; cursor: puntero; } #Container ul {altura: 0; Ancho: 100px; desbordamiento: oculto; Transición: todos 1s; Posición: Absoluto; arriba: 30px; Izquierda: 0px; } #Container: Hover ul {altura: 330px; } #Container ul Li {fondo: #EEE; margen-top: 3px; cursor: puntero; Altura: 30px; Línea de altura: 30px; } </style> </head> <body> <div id = "Container"> <span> móvil </span> <ul> <li> 1 aquí </li> <li> 2 aquí </li> <li> 3 aquí </li> <li> 4 aquí </li> <li> 5 aquí </li> <li> 6 aquí </li> <li> 7 aquí </li> <li> 8 </li> 9 li> aquí </li> </ul> </div> </body> </html>Debido a que UL es un objeto de escala, debe separarse del flujo del documento. No afectará el diseño cuando sea práctico, solo dale una posición absoluta.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.