<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li>Separated link</li>
  </ul>
</div>
.btn > .caret,
.dropup > .btn > .caret {
  border-top-color: #000 !important;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #333;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu > li {
  display: block;
  padding: 6px 16px;
  color: #ffffff;
  border: solid 1px #888;
  background-color: #333;
  /* width: 140px; */
  height: 36px;
  overflow: hidden;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;

  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  white-space: nowrap;
}
.dropdown {
  position: relative;
}
.dropdown-toggle {
  display: block;
  padding: 10px 15px;
  background-color: #e7e7e7;
  color: #555;
}
.open > .dropdown-menu {
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.