响应式菜单问题 - 单击时未打开

Question

我有一个响应式菜单，但我遇到的问题是，当它重新调整大小时，单击时菜单不会下拉。我包括了一个codepen。不用担心 3 行不显示，它们在实际网站上会显示。

菜单代码

<label for="show-menu" class="show-menu"><i class="fa fa-bars fa-2x"></i></label>
   <input type="checkbox" id="show-menu" role="button">
        <nav class="cl-effect-4">
        <ul id = "nav" class="cl-effect-4">
            <li><a href="index.php?page=work">WORK</a><span class="slash-size">/</span></li>
            <li><a href="index.php?page=about">ABOUT</a>
        </ul>
        </nav>    

提前致谢

Answer 1

您需要 javascript 来处理菜单的打开和关闭。如果您可以使用 jquery，请添加以下内容：

$('.show-menu').click(function() {
    $('#nav').toggle();
})

编辑：啊，现在我看到您想使用复选框 css 技巧来显示/隐藏您的菜单。将input[type=checkbox]:checked ~ #nav{ 更改为input[type=checkbox]:checked ~ nav #nav{