Блог

Главная - Вопросы по программированию - Выпадающее меню внутри другого выпадающего меню

Выпадающее меню внутри другого выпадающего меню

#bootstrapper

#загрузчик

Вопрос:

У меня проблема. Я хочу создать выпадающее меню «Наш выбор» внутри выпадающего меню «Игры», но я не понимаю, почему код не работает. Можете ли вы, ребята, сказать мне, откуда возникла проблема?

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

Комментарии:

1. Это уже внутри выпадающего списка игр. в чем проблема, с которой вы столкнулись

2. Я хочу создать наше выпадающее меню выбора с элементами 2020, 2019 внутри него. Наш выбор, о котором вы сказали, является лишь одним из выпадающих пунктов выпадающего меню игр

3. вы хотите другое меню внутри нашего меню выбора?

4. Я хочу другое меню с 2019, 2020 годами в качестве элементов внутри нашего выбора

5. Я точно следовал инструкциям, как при создании выпадающего меню для игр, но это не сработало

Ответ №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>