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

我有一个响应性很强的菜单，但我的问题是，当它被重新调整大小时，单击时菜单不会下拉。我已经包括了一个。不要担心这三行不会出现，它们会出现在实际的网站上

菜单代码

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

/

---

提前感谢

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

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

---

编辑：啊，现在我看到你想利用复选框css技巧来显示/隐藏你的菜单。将

input[type=checkbox]：选中~#导航{

更改为

input[type=checkbox]：选中~#导航{

谢谢，这是可行的，但是当我打开汉堡菜单并关闭它，然后重新调整大小到正常值时，菜单就会消失，你知道吗？如果我打开汉堡菜单，然后重新调整大小到正常值，它会保持不变。它仍然存在同样的问题，当我将浏览器的大小调整到更小时，汉堡菜单会显示出来，我单击它，链接就会显示出来。如果我关闭它会重新调整浏览器的大小，使其恢复到全尺寸。链接消失。这与仅使用css的方法没有问题。别忘了删除我之前编写的javascript代码。正如我在编辑的回答中所说，只需添加nav bevore#nav即可。啊，抱歉，我没有看到这一部分。非常感谢！我已经更新了代码笔，它工作得很好.你知道如何固定对齐方式吗？它没有完全覆盖页面。