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来显示：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进行测试，这对他们有用。我们缺少什么？即使我们右键单击“元素”检查器中的导航栏元素并将状态强制为：悬停状态，此用户也看不到悬停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;
}

修复了所有用户的问题。但是，有问题的相同用户无法单击菜单中的任何链接。如果他们右键单击＆gt;在新标签页中打开链接，它可以正常使用。

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

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

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

1 个答案: