<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>
$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;
View Compiled
// Feel free to customize it to your own way. Colors, sizes, shadows, borders, etc

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.