Prenons un autre exemple que quelqu'un a dit aujourd'hui: pur menu déroulant CSS:
Diagramme de reproduction
La mise en œuvre de ceci est très simple, principalement: l'utilisation de la transition de survol et d'attribut de transition.
Code:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> css </ title> <style> * {margin: 0; rembourrage: 0; taille de police: 16px; Font-Family: "Microsoft Yahei"; } #Container {width: 100px; marge: 0 auto; Texte-aligne: Centre; Position: relative; } #Container ul {list-style: Aucun; } #Container Span {display: en ligne de bloc; Largeur: 100px; hauteur: 30px; hauteur de ligne: 30px; curseur: pointeur; } #Container ul {hauteur: 0; Largeur: 100px; débordement: caché; Transition: Tous les 1; Position: absolue; En haut: 30px; gauche: 0px; } #Container: Hover ul {hauteur: 330px; } #Container ul li {background: #eee; marge: 3px; curseur: pointeur; hauteur: 30px; hauteur de ligne: 30px; } </ style> </ head> <body> <div id = "Container"> <span> mobile </span> <ul> <li> 1 ici </li> <li> 2 ici </li> <li> 3 ici </li> <li> 4 ici </li> <li> 5 ici </li> <li> 6 ici </li> <li> </li> <li> <li> <li>. Ici </li> </ul> </div> </ body> </html>Parce que UL est un objet de mise à l'échelle, il doit être séparé du flux de document. Cela n'affectera pas la disposition lorsqu'elle est pratique, lui donnera simplement une position absolue.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.