<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
ul,li{list-style: none;}
*{padding: 0; margin: 0;}
.nav-con{display: none;}
.nav-box{display: none;}
.nav-con:checked ~ .nav-box{display: block;}
.nav-btn{padding: 10px 15px;background:red;}
</style>
<body>
<label for="control" class="nav-btn">菜单</label>
<div>
<input type="checkbox" name="" id="control" class="nav-con">
<ul class="nav-box">
<li><a href="#">首页</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
