另一个下拉菜单中的下拉菜单

Question

我有问题。我想在游戏下拉菜单中创建一个 Our Pick 下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？

<div class="collapse navbar-collapse" id="menu">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a>
                            <ul class="dropdown-menu games-menu" >
                                <li><a href="latest.html" class="dropdown-item">Latest</a></li>
                                <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li>
                                <div class="dropdown">
                                    <li><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a></li>
                                        <ul class="dropdown-menu games-menu">
                                            <li><a href="2019.html" class="dropdown-item">2019</a></li>
                                            <li><a href="2020.html" class="dropdown-item">2020</a></li>
                                        </ul>
                                </div>   
                            </ul>
                    </li>
          </ul>
</div>

Answer 1

您可以简单地添加另一个嵌套的 li 和另一个 dropdown 并使用自定义 CSS 在悬停时显示 dropdown。

现场工作演示：

.sub-menu:hover .games-menu {
  display: block;
}

.sub-menu2:hover .our-pick-menu {
  display: block;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="navbar-collapse" id="menu">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a>
      <ul class="dropdown-menu games-menu">
        <li><a href="latest.html" class="dropdown-item">Latest</a></li>
        <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li>
        <div class="dropdown">
          <li class="sub-menu"><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a>
            <ul class="dropdown-menu games-menu">
              <li><a href="2019.html" class="dropdown-item">2019</a></li>
              <li><a href="2020.html" class="dropdown-item">2020</a></li>
              <div class="dropdown">
                <li class="sub-menu2"><a href="#" class="dropdown-item dropdown-toggle our-pick-2" data-toggle="dropdown">Our Pick 2</a>
                  <ul class="dropdown-menu our-pick-menu">
                    <li><a href="2019.html" class="dropdown-item">2021</a></li>
                    <li><a href="2020.html" class="dropdown-item">2022</a></li>
                  </ul>
                </li>
              </div>
            </ul>
          </li>
        </div>

      </ul>
    </li>
  </ul>
</div>

另一个下拉菜单中的下拉菜单

Dropdown menu inside another dropdown menu

bootstrapper