Let’s take another example that someone said today: Pure CSS drop-down menu:
Reproduction diagram
The implementation of this is very simple, mainly: the use of hover and transition attribute transition.
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size: 16px; font-family: "Microsoft Yahei"; } #container{ width: 100px; margin: 0 auto; text-align: center; position: relative; } #container ul{ list-style: none; } #container span{ display: inline-block; width: 100px; height: 30px; line-height: 30px; cursor: pointer; } #container ul{ height: 0; width: 100px; overflow: hidden; transition: all 1s; position: absolute; top: 30px; left: 0px; } #container:hover ul{ height: 330px; } #container ul li{ background: #eee; margin-top: 3px; cursor: pointer; height: 30px; line-height: 30px; } </style></head><body> <div id="container"> <span>Mobile</span> <ul> <li>1 here</li> <li>2 here</li> <li>3 here</li> <li>4 here</li> <li>5 here</li> <li>6 here</li> <li>7 here</li> <li>8 here</li> <li>9 here</li> <li>10 here</li> </ul> </div></body></html>Because ul is a scaling object, it should be separated from the document flow. It will not affect the layout when it is practical, just give it an absolute position.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.