代码如下： !doctype html html head meta charset = utf-8 / style *{ margin:0; padding:0; text-decoration:none; list-style:none; } body{ text-align:center; } .header{ display:inline-block; position:relative; background-color:#4CAF50; } .head
|
代码如下： <!doctype html><html><head><meta charset="utf-8"/><style>*{margin:0;padding:0;text-decoration:none;list-style:none;}body{text-align:center;}.header{display:inline-block;position:relative;background-color:#4CAF50;}.header:hover .downbtn{display:block;background-color: #f1f1f1;}.header:hover{background-color: #3e8e41;}.header span{padding:15px;line-height:61px;cursor:pointer;color: white;}.header .downbtn{display:none;position:absolute;background-color:#f9f9f9;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);min-width: 160px;}.header .downbtn li{line-height:30px;text-align:left;padding-left:5px;}.header .downbtn a:hover{text-decoration:underline;color:#f00;}.header .downbtn a{display:block;color:black;width:100%; }</style></head><body><div class="header"><span>下拉列表</span> <div class="downbtn"><ul><li><a href="#">下拉列表01</a></li><li><a href="#">下拉列表02</a></li><li><a href="#">下拉列表03</a></li><li><a href="#">下拉列表04</a></li><li><a href="#">下拉列表05</a></li></ul></div></div></body></html>效果图如下： 
需要注意的是：
|
2021-04-14
2021-04-29
2018-01-07
2022-06-10
2021-09-30
