<div class="grid">
  <div class="container">
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">San Pedro de Atacama</a></li>
      <li class="active relative drop-container">
        <span href="#">Geysers del Tatio (Standard) <span class="glyphicon glyphicon-triangle-bottom small" aria-hidden="true"></span></span>
        <div class="drop bg-white">
          <ul class="list pl0">
            <li><a href="#">Geysers del Tatio (Superior)</a></li>
            <li><a href="#">Geysers del Tatio (Lujo)</a></li>
          </ul>
        </div>
      </li>
    </ol>
  </div>
</div>

$background-color: rgba(23,23,34, 1);

body {
  background-color: $background-color;
}

.grid {
  display: grid;
  align-items: center;
  height: 100vh;
}

.small {
  font-size: 10px;
}

.drop-container {
  &:hover .drop {
    display: block;
  }
  .drop {
    display: none;
    position: absolute;
    top: 20px;
    left: 8px;
    a {
      display: block;
      padding: 8px 16px;
    }
  }
}

// Feel free to customize it to your own way. Colors, sizes, shadows, borders, etc