响应式导航栏（全屏到手机）

Question

**编辑：我应该提一下，我只能使用CSS。

我的导航栏出现问题。基本上，它在移动视图中完美运行，但似乎无法在全屏模式下工作。以下图表是我想要尝试实现的示例：

全屏模式：

移动模式：

HTML，CSS IN LINK：

    <nav>
    <div class="navigation">
        <a href="#" class="logo"></a>
        <input class="menu-btn" type="checkbox" id="menu-btn" name="menu-button" />
        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
        <ul class="menu">
            <li><a href="#Pages/about.html">About</a></li>
            <li><a href="#">Events and Workshops</a>
                <ul class="hidden">
                    <li><a href="Pages/upcomingevents.html">Upcoming Events</a></li>
                    <li><a href="Pages/comingworkshops.html">Upcoming Workshops</a></li>
                    <li><a href="Pages/request.html">Request an Event or Workshop</a></li>
                </ul>
            </li>
            <li><a href="#">Resources</a>
                <ul class="hidden">
                    <li><a href="Pages/allresources.html">All Resources</a></li>
                    <li><a href="Pages/nutrition.html">Nutrition Resources</a></li>
                    <li><a href="Pages/physical.html">Physical Activity Resources</a></li>
                    <li><a href="Pages/mental.html">Mental Health Resources</a></li>
                    <li><a href="Pages/spiritual.html">Spiritual Health Resources</a></li>
                    <li><a href="Pages/social.html">Social Health Resources</a></li>
                    <li><a href="Pages/medical.html">Medical Health Resources</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav

此链接中的完整HTML + CSS：https://jsfiddle.net/fkw2h0b6/

谢谢！