当用户将鼠标悬停在 Chrome 或 Firefox 中的链接上时，悬停状态未激活

Question

我们创建了这个页面： http://www.sandiego.edu/mysandiego/usd_portal/

在该页面上，有一个导航栏。

<nav class="alignLeft">
                    <ul>
                        <li class="active">
                            <a href="#">Torero Hub</a>
                            <ul>
                                <li class="active">
                                    <a href="#">Welcome</a>
                                </li>
                                <li>
                                    <a href="#">My Academics</a>
                                </li>
                                <li>
                                    <a href="#">My Financial Aid</a>
                                </li>
                                <li>
                                    <a href="#">My Student Account</a>
                                </li>
                                <li>
                                    <a href="#">My Torero Services</a>
                                </li>
                                <li>
                                    <a href="#">My Gadgets</a>
                                </li>
                                <li>
                                    <a href="#">Library</a>
                                </li>
                                <li>
                                    <a href="#">Law Library</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Torero Life</a>
                            <ul>
                                <li>
                                    <a href="#">Student Affairs</a>
                                </li>
                                <li>
                                    <a href="#">Clubs and Activities</a>
                                </li>
                                <li>
                                    <a href="#">Graduate Life</a>
                                </li>
                                <li>
                                    <a href="#">Alumni</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

CSS 应该像这样开始：

.navBar nav li ul {
    display: none;
    background-color: #FFF;
    border-radius: 0px 0px 6px 6px;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.25);
    left: 0px;
    padding: 10px 0px;
    position: absolute;
    top: 60px;
    width: 300px;
}

如果将鼠标悬停在该选项卡上，它应该会弹出一个辅助导航菜单。它通过检测悬停状态并更改显示：无到显示：块来实现此目的。

.no-touch .navBar nav li:hover ul, .no-js .navBar nav li:hover ul, .navBar nav li ul.active {
    display: block;
}

这适用于我测试过的每个浏览器和操作系统，但一个用户无法让它在 Chrome 和 Firefox 中工作，我真的不知道为什么。它在Internet Explorer中对他有用。

当用户将鼠标悬停在Chrome或Firefox中的标签上时，没有任何反应。用户只能通过单击选项卡来显示弹出窗口，而不能仅通过悬停来显示弹出窗口。

用户使用的是 Windows 7 64 位 SP1 和 Chrome 版本 40.0.2214.85 beta-m（64 位）。

我要求其他Windows 7用户使用Chrome和Firefox进行测试，这对他们有用。我们缺少什么？即使我们右键单击元素检查器中的导航栏元素并强制状态为 ：hover 状态，此用户也看不到悬停 CSS。什么给？

编辑：我发现另一个用户有同样的问题，所以它看起来并不孤立于用户的工作站。这两个用户都是Windows 7用户，都可以在Internet Explorer中看到菜单，但在Chrome或Firefox上看不到。

编辑 2：从这里更改 CSS

.no-touch .navBar nav li:hover ul,
.no-js .navBar nav li:hover ul,
.navBar nav li ul.active {
    display: block;
}

对此

.navBar nav li:hover ul {
    display: block;
}

修复了所有用户的问题。但是，有问题的相同用户无法单击菜单中的任何链接。如果他们右键单击>在新选项卡中打开链接，则对他们来说效果很好。

Answer 1

这就是你如何正确地做到这一点...

.HTML：

<ul>
    <li>link 1</li>
    <li>link 2</li>
    <li class="more">more</li>
    <ul>
        <li>link 3</li>
        <li>link 4</li>
    </ul>
</ul>

.CSS：

ul ul {
    display: none;}
.more:hover + ul {
    display: block;}

您需要注意的是选择器中+的使用。悬停状态之后的任何内容都需要这个，以便它知道直系兄弟姐妹需要受到影响。