Bootstrap popup does not pop up

Question

I created a dropdown menu in Bootstrap in HTML. A button will appear, as well as a carriage. But the menu does not appear. Here is my code:

.dropdown {
  color: #666666;
  font-size: 11px;
}
.dropdown .btn-default {
  background: #f2f2f2;
  color: black;
  border: none;
  border-radius: 0px;
  width: 150px;
  height: 20px;
  padding-top: 3px;
  margin-top: -2px;
  margin-bottom: 3px;
  font-size: 11px;
}
.dropdown .btn-default,
.dropdown .btn-default:focus {
  background-color: coral;
  color: black;
}
.dropdown .btn-default:active,
.dropdown .btn-default .dropdown-toggle:active,
.dropdown .btn-default:hover {
  background-color: coral;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
  Lingua
  <button class=" btn btn-default " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">Italiano
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="http://www.geysir-andernach.de/navigation2012/flag_2.png">England</li>
  </ul>
</div>

Run codeHide result

Am I doing something wrong or am I supposed to change something? Thank you The answer below really helped, but I have two drop-down buttons, and a menu for each of them appears under the first button of the drop-down list. How can i fix this? Here are two drop-down lists:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
  Lingua
  <button class=" btn btn-default " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italiano
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>

  Paese
  <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italia
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>
</div>

Run codeHide result

Answer 1

You skipped to close the drop-down list and create a new drop-down menu.

Add below code before Paese text

</div>
<div class="dropdown">

. , bootstrap jQuery. HTML.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

:

.dropdown {
  color: #666666;
  font-size: 11px;
  display: inline;
}
.dropdown .btn-default {
  background: #f2f2f2;
  color: black;
  border: none;
  border-radius: 0px;
  width: 150px;
  height: 20px;
  padding-top: 3px;
  margin-top: -2px;
  margin-bottom: 3px;
  font-size: 11px;
}
.dropdown.btn-default,
.dropdown.btn-default:focus {
  background-color: coral;
  color: black;
}
.dropdown.btn-default:active,
.dropdown.btn-default.dropdown-toggle:active,
.dropdown.btn-default:hover {
  background-color: coral;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  Lingua
  <button class=" btn btn-default " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italiano
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>
</div>
<div class="dropdown">
  Paese
  <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italia
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>
</div>

Hide result

Answer 2

CDN .