html - 无法从菜单中悬停第二个 ul

Question

我不知道我在哪里弄错了，我无法将菜单的第二个 ul 悬停，解决方案向下箭头按钮在哪里，当我悬停它时它不会保持事件状态。我添加了 mobile_menu 类以将它与其他菜单分开，但我找不到我应该把 #mobile_menu 放在哪里才能让它工作

这里是 fiddle

HTML

<div id="mobile_menu">
        <label for="show-menu" class="show-menu lines"></label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li><a href="#">Features</a></li>
            <li>
                <a href="#">Solutions ￬</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="#">Pricing ￬</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="#">Resources</a></li>
            <li>
                <a href="#">About ￬</a>
                <ul class="hidden">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Carrers</a></li> 
                </ul>
             </li>
        </ul>
    </div>

Answer 1

当 hidden div 可见并被悬停时，您只需稳定即可。

我已经更新了你的fiddle

/*Display the dropdown on hover*/
#mobile_menu ul li:hover > .hidden{
    display: block; /* make div display on hover*/
}