css 實現動態二級選單
阿新 • • 發佈：2020-06-29
動態實現簡單的二級選單
當滑鼠放到一級標籤上時，滑鼠會變成小手的形狀 展示二級選單，原始碼如下，複製即可直接使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 * {margin: 0; padding: 0;} 9 ul { list-style: none;} 10 div { 11 width: 100%; 12 height: 50px; 13 background-color: #ccc; 14 } 15 .first { 16 width: 100px; 17 height: 50px; 18 float: left; 19 margin-right: 70px; 20 /* background-color: pink; */ 21 cursor: pointer; 22 text-align: center; 23 line-height: 50px; 24 border-radius: 15px; 25 } 26 .second li{ 27 width: 80px; 28 height: 50px; 29 background-color: blue; 30 border-radius: 50%; 31 margin-top: 10px; 32 } 33 .second { 34 display: none; 35 } 36 .first:hover .second{ 37 display: block; 38 cursor: pointer; 39 } 40 .first:hover { 41 background-color: pink; 42 } 43 </style> 44 45 <body> 46 <div> 47 <ul> 48 <li class="first"> 49 <p>一級標籤</p> 50 <ul class="second"> 51 <li>二級標籤</li> 52 <li>二級標籤</li> 53 </ul> 54 </li> 55 56 <li class="first"> 57 <p>一級標籤</p> 58 <ul class="second"> 59 <li>二級標籤</li> 60 <li>二級標籤</li> 61 </ul> 62 </li> 63 </ul> 64 </div> 65 66 </body> 67 </html>
如果讀者有不明白的地方，或建議可直接留言，定會一一解答。