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/

Answer 2

这是因为只有在.hidden被徘徊时才会显示<a>子列表，根据此规则：

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

这将无效，因为一旦光标离开元素并跨越到现在显示的相邻:hover元素，.hidden伪类就会丢失。为避免这种情况，只要父元素.hidden悬停在其上，就会强制显示<li>。因此，我们可以使用此选择器：

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

请在此处查看工作小提琴：http://jsfiddle.net/teddyrised/1000s8y0/14/

Answer 3

很简单，你只需要将这段代码添加到你的css

#navigation li:hover ul
{
    display:block;
}

它会正常工作，我刚刚在这里进行了更改，只是添加了这段代码及其工作......是的....

http://jsfiddle.net/naveenkumarpg/1000s8y0/16/

Answer 4

而不是

#navigation li ul {
    display: none;
}

请使用：

.hidden {
    display: none;
}

确保display：none的应用具有最小的特异性，因此悬停样式可以覆盖它。

http://jsfiddle.net/1000s8y0/17/

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

4 个答案: