html - 纯HTML和CSS可切换下拉菜单

所以我找到了这两个提示页，其中解释了原理：使用：悬停使下拉列表显示，使用复选框将其打开或关闭
我有点工作，但我有问题时，我来CSS样式。设置：悬停状态的样式非常简单。不那么简单的是设置切换打开下拉菜单的样式，因为父CSS选择器在哪里。我真的不想使用JavaScript。
所以我把代码粘贴到JSfiddle上。复选框的位置暂时不重要。
My code
这个部分（在css的底部）就是问题所在。

nav ul li #chktut:checked:parent {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }

最佳答案

要使“教程”可单击，请使用连接到chktut的标签：

<li><input type="checkbox" id="chktut" /><label for="chktut">Tutorials</label>

要隐藏复选框，请将其“显示”设置为“无”：

#chktut{
   display: none;
}