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

Question

我尝试仅使用 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>

Answer 1

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

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