Toggle contextual overlays for displaying lists of links and more with the dropdown plugin: Google AMP Dropdowns Library.
Dropdown colors by adding .btn-light .btn-dark .btn-primary .btn-info .btn-warning .btn-success .btn-danger to the parent element.
<label class="dropdown">
<span class="btn btn-light dropdown-toggle">Dropdown</span>
<input type="checkbox" class="dropdown-input" id="/">
<ul class="dropdown-menu">
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<div class="dropdown-divider"></div>
<li class="dropdown-item">
<a href="#" title="...">...</a>
</li>
</ul>
</label>
Trigger dropdown menus above elements by adding .dropdown .dropup .dropleft .dropright to the parent element.
<label class="dropdown">
<span class="btn btn-light dropdown-toggle">Dropdown</span>
<input type="checkbox" class="dropdown-input" id="/">
<ul class="dropdown-menu">
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<div class="dropdown-divider"></div>
<li class="dropdown-item">
<a href="#" title="...">...</a>
</li>
</ul>
</label>
<!-- Dropdown small -->
<label class="dropdown">
<span class="btn btn-light btn-sm dropdown-toggle">Small</span>
<input type="checkbox" class="dropdown-input" id="/">
<ul class="dropdown-menu">
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<div class="dropdown-divider"></div>
<li class="dropdown-item">
<a href="#" title="...">...</a>
</li>
</ul>
</label>
<!-- Dropdown large -->
<label class="dropdown">
<span class="btn btn-light btn-lg dropdown-toggle">Large</span>
<input type="checkbox" class="dropdown-input" id="/">
<ul class="dropdown-menu">
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<li class="dropdown-item">...</li>
<div class="dropdown-divider"></div>
<li class="dropdown-item">
<a href="#" title="...">...</a>
</li>
</ul>
</label>