Dropdown menu inside another dropdown menu

Question

I have a problem. I want to create an Our Pick dropdown menu inside the Games dropdown menu but I don't why the code doesn't work. Can you guys tell me where is the problem come from?

<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

You can simply add another nested li with another dropdown inside it and use custom CSS to display that dropdown on hover.

Live Working Demo:

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