简单的下拉菜单
至诚网络2019-03-26 19:41:27166<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style type="text/css">
*{margin:0;padding: 0;}
a{text-decoration: none;}
li{list-style: none;}
.box{width: 200px;margin: 0 auto;text-align: center;}
ul li{padding: 5px;}
p {font-size: 30px;color: red;display: block;width: 200px;border:1px solid pink;}
.box ul{border:1px solid pink;display: none;}
.box:hover ul{display: block;}
ul li:hover{background-color: pink;}
.box ul li{color: red;font-size: 20px;}
</style>
</head>
<body>
<div class="box">
<a href=""><p>更多</p>
<ul>
<li><a href="">新闻</a></li>
<li><a href="">社会</a></li>
<li><a href="">滚动</a></li>
</ul>
</a>
</div>
</div>
</body>
</html>