Vamos dar outro exemplo que alguém disse hoje: Menu suspenso Puro CSS:
Diagrama de reprodução
A implementação disso é muito simples, principalmente: o uso da transição do atributo de pau e transição.
Código:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margem: 0; preenchimento: 0; Size da fonte: 16px; Fonte-família: "Microsoft Yahei"; } #container {width: 100px; margem: 0 automático; Alinhamento de texto: centro; Posição: relativa; } #container Ul {estilo de lista: nenhum; } #container span {display: inline-block; Largura: 100px; Altura: 30px; altura de linha: 30px; Cursor: Ponteiro; } #container ul {altura: 0; Largura: 100px; estouro: oculto; transição: todos os 1s; Posição: Absoluto; TOP: 30px; Esquerda: 0px; } #container: hover ul {altura: 330px; } #container ul li {background: #eee; Margin-top: 3px; Cursor: Ponteiro; Altura: 30px; altura de linha: 30px; } </style> </head> <body> <div id = "contêiner"> <pan> celular </span> <ul> <li> 1 aqui </li> <li> 2 aqui </li> <li> 3 aqui </li> <li> 4 </li> </li> <li> 5 aqui </li> 4 aqui </li> <li> 7 </li> Aqui </li> </ul> </div> </body> </html>Como a UL é um objeto de escala, ele deve ser separado do fluxo de documentos. Não afetará o layout quando for prático, basta dar uma posição absoluta.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.