<!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>