1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉框</title> 6 <style> 7 *{ 8 margin :0; 9 padding: 0; 10 } 11 div{ 12 cursor: pointer; /*鼠标样式设置为小手*/ 13 width: 300px; 14 margin: 0 auto; 15 border: 1px lightgreen solid; 16 } 17 h3{ 18 background-color: lightpink; 19 text-align: center; 20 text-size: 20px; 21 color: white; 22 font-weight: bold; 23 } 24 ul{ 25 text-decoration: none; /*去除列表样式*/ 26 display: none; /*将列表隐藏*/ 27 } 28 div:hover ul{ 29 display: block; /*当鼠标点击div出现列表*/ 30 list-style: none; 31 } 32 div ul li{ 33 text-align: center; 34 color: cornflowerblue; 35 font-size: 15px; 36 line-height: 26px; 37 } 38 </style> 39 </head> 40 <body> 41 <div> 42 <h3>标题</h3> 43 <ul> 44 <li>这是列表项1</li> 45 <li>这是列表项2</li> 46 <li>这是列表项3</li> 47 <li>这是列表项4</li> 48 </ul> 49 </div> 50 </body> 51 </html>
当鼠标点击标题时出现列表项。