Cacher is the code snippet organizer for pro developers

html {
  margin:50px;
}
* {
  box-sizing: border-box;
}

$nb-drop-down-width: 400px;
$nb-drop-down-height: 60px;

ul, li, button {
  margin:0;
  padding:0;
}

ul {
  list-style: none;
}

.nb-drop-down {
  width:$nb-drop-down-width;
  ul {
    width:100%;
    border:1px solid #eee;
    display:none;
  }
  button, li {
   text-align: left;
   line-height: $nb-drop-down-height;
    padding-left: 10px;
    cursor: pointer;
  }
  button {
    width:100%;
    background: transparent;
    border: 1px solid #eee;
    position: relative;
    &::after {
      content:'';
      position: absolute;
      border-style: solid;
      right:15px;
      top:50%;
      transform: translateY(-50%);
      border-width: 10px 6.5px 0 6.5px;
      border-color: #e3e3e3 transparent transparent transparent;
    }
    &:focus {
      outline:none;
    }
  }
  
  li:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
  
}

(function() {
  
  var mainItemBtns = document.querySelectorAll('.nb-main-item');
  
  Array.prototype.forEach.call(mainItemBtns, function(btn) {
    btn.addEventListener('click', function(e) {
       e.stopPropagation();
      var list = this.nextElementSibling;
      list.style.display = 'block';
    });
  });
  
  var lists = document.querySelectorAll('.nb-list');
  
  Array.prototype.forEach.call(lists, function(list) {
    list.addEventListener('click', function(e) {
      if(e.target.nodeName === 'LI') {
        this.style.display = 'none';
      }
    });
  });
  
  document.body.addEventListener('click', function(e) {
    var lists = document.querySelectorAll('.nb-list');
     Array.prototype.forEach.call(lists, function(list) {
        list.style.display = 'none';
    });
  })
  
})();

<div class="nb-drop-down">
    <button class="nb-main-item">Main Item</button>
    <ul class="nb-list">
      <li>Item One</li>
      <li>Item Two</li>
      <li>Item Three</li>
    </ul>
</div>

<div style="margin-top:100px;">
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
</div>