css - 仅使用CSS的Bootstrap Dropdown Hoverable Dropdown菜单

我试图仅使用CSS使代码的这一部分可悬浮，但是没有用，我按照此处的步骤http://www.w3schools.com/howto/howto_css_dropdown.asp进行操作，但是我无法在代码中正确放置任何内容，或者使悬浮或相反，我使整个.list都可悬停，但是.list不能悬停

<nav class="navbar navbar-toggleable-md navbar-light">
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <div class="list">
                                <a class="dropdown-item" href="#">1</a>
                                <a class="dropdown-item" href="#">2</a>
                                <a class="dropdown-item" href="#">3</a>
                                <a class="dropdown-item" href="#">4</a>
                                <a class="dropdown-item" href="#">5</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

CSS（我自己尝试过的方法）

<style>
.dropdown-menu {
    visibility: hidden;
}

.dropdown-menu:hover > .list {
    visibility: visible;
}
</style>

最佳答案

这是一个奇怪的结构，但是问题的核心在于您针对错误的类。

.dropdown{
  display: block;
}

.dropdown-menu {
    display: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

<nav class="navbar navbar-toggleable-md navbar-light">
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown

                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <div class="list">
                                <a class="dropdown-item" href="#">1</a>
                                <a class="dropdown-item" href="#">2</a>
                                <a class="dropdown-item" href="#">3</a>
                                <a class="dropdown-item" href="#">4</a>
                                <a class="dropdown-item" href="#">5</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

关于css - 仅使用CSS的Bootstrap Dropdown Hoverable Dropdown菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41941048/