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

Question

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

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