Question

我遇到下拉列表问题。这是我得到的HTML代码。

屏幕截图：http://i.imgur.com/zIAhQkj.png

<nav>
    <a href="index.php"> Hjem </a>

    <ul>
        <li class="nav_link">
            <a onclick="extern_link_warning()" class="dropdown_hover" 
                   href="http://bbc.com">Innleveringer</a>
            <ul class="preview_box">
                <li>
                    <a onclick="extern_link_warning()" href="http://bbc.com">Link 1</a>
                </li>
                <li>
                    <a href="link2.html">Link 2</a>
                </li>
            </ul>
        </li>
        <li><a href="index.php?p=ommeg"> Om meg </a></li>

        <!-- Kun admin brukere ser disse sidene: -->

        <?php
            if ($isLoggedIn){
                echo '<li><a href="index.php?ap=admin"> Admin </a></li>';
            }
        ?>
    </ul>
</nav>

我的下拉列表的CSS代码：

.preview_box {
    display: none;
}

a:hover + .preview_box,.preview_box:hover {
    display: block;
}

上面的代码可行，但问题是我希望在悬停“.nav_link”标记而不是“a”标记时出现“.preview_box”，但我无法让它工作。这就是我尝试过的：

.nav_link:hover + .preview_box, .preview_box:hover {

}

.nav_link:hover + .nav_link .preview_box, .nav_link .preview_box:hover {

}

我有什么想法可以让它发挥作用吗？

Answer 1

在阅读并阅读您的问题后，我认为您想要的是当您将li悬停在nav_link上时，您想要显示.preview-box，而不是将锚点悬停在其中...

嗯，这应该可以解决问题......

.nav_link:hover .preview_box {
  display: block;
}

下拉列表出现问题（悬停）CSS HTML5

1 个答案: