css---点击显示和隐藏

时间：2023-12-19 08:23:50
<!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>

相关文章