再來個今天某人說過的例子：純css下拉菜單：
效果圖
這個的實現很簡單，主要是:hover和過渡屬性transition的使用。
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size: 16px; font-family: "微軟雅黑"; } #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>移動</span> <ul> <li>這裡有1</li> <li>這裡有2</li> <li>這裡有3</li> <li>這裡有4</li> <li>這裡有5</li> <li>這裡有6</li> <li>這裡有7</li> <li>這裡有8</li> <li>這裡有9</li> <li>這裡有10</li> </ul> </div></body></html>因為ul是個伸縮對象，所以要讓它脫離文檔流，不是在實用時會影響到佈局，給它一個絕對定位即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。