dropdowns

dropdown.html

<div class="dropdown">
  <a href="#" class="dropdown-trigger">Trigger Dropdown</a>
  <ul class="dropdown-content">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

dropdown.js

function dropdowns(){
  $(".dropdown-trigger").click(function() {
    $(this).next(".dropdown-content").toggleClass("show");
    return false;
  });

  $("html").click(function() {
    $(".dropdown-content").removeClass("show");
  });

  $(".dropdown, .dropdown-trigger, .dropdown-content").click(function(event) {
    return event.stopPropagation();
  });
}

dropdowns();

dropdown.scss

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  list-style: none;
  z-index: 15;
  &.show {
    display: block;
  }
  a {
    display: block;
  }
}