Doe Doe - 4 months ago 18
HTML Question

The bootstrap dropdown doesn't pop up

I created a dropdown menu in Bootstrap in HTML. The button appears and so does the caret. But the menu doesnt pop up. 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>





Is something I've done wrong or should I change something there? Thanks!
The answer below really helped but I have 2 dropdown buttons and the menu of each of them appears under the first dropdown button. How can I fix that?
Here are the 2 dropdowns:



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




Answer

You missed to close the dropdown and create a new dropdown.

Add below code before the text Paese

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

Note: You seem to be missing the bootstrap and jQuery references. Add below references to the head section of your 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" />

Working code:

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