当用户将鼠标悬停在 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;
}

如果您将鼠标悬停在标签上，它应该会弹出一个二级导航菜单。它通过检测悬停状态并将 display: none 更改为 display: block 来做到这一点。

.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;}

你需要注意的是，+ 在选择器中的使用。悬停状态之后的任何东西都需要这个，所以它知道直接的兄弟姐妹需要受到影响。