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>当鼠标点击标题时出现列表项。
HTML与CSS之display：none
原文地址：https://www.cnblogs.com/Lia-633/p/9413030.html