can't view the first dropdown sub menu with bootstrap, always the second :-(

Question

<div class="btn-group"> 

                <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">menu1</button>
                <ul class="dropdown-menu">
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                    <li><a href="#">e</a></li>                 
                </ul>



                <button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">menu2</button>
                <ul class="dropdown-menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>                   
                    <li><a href="#">3</a></li>                   
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
              </ul>     

        </div>

Answer 1

You need to wrap each drop-down in separate div. Below is the working snippet

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">menu1</button>
  <ul class="dropdown-menu">
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
    <li><a href="#">e</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">menu2</button>
  <ul class="dropdown-menu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>