html - 响应式下拉菜单 - 隐藏的li无法点击

Question

我有这个下拉菜单，在添加 ID 标签和导航标签后，我无法将鼠标悬停在下拉菜单上，因为一旦我尝试将鼠标悬停在它们上面，它们就会消失

请看这里的代码 JSFiddle

<div class="container">
    <nav id="navigation">
        <label for="show-menu" class="show-menu">Menu</label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li><a href="#">HOME</a></li>
            <li>
                <a href="#">SERMONS <span>&#x25BC</span></a>
                <ul class="hidden">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">What We Do</a></li>
                </ul>
            </li>
            <li>
                <a href="#">EVENTS <span>&#x25BC</span></a>
                <ul class="hidden">
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Web & User Interface Design</a></li>
                    <li><a href="#">Illustration</a></li>
                </ul>
            </li>
            <li><a href="#">CONNECT<span>&#x25BC</span></a></li>
            <li><a href="#">STAFF<span>&#x25BC</span></a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">LOCATIONS<span>&#x25BC</span></a></li>
            <li><a href="#">OTHERS<span>&#x25BC</span></a></li>
        </ul>
    </nav>
</div>

Answer 1

#navigation > ul > li:hover .hidden, .hidden:hover {
    display: block;
}

演示 - http://jsfiddle.net/1000s8y0/15/