JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="contact-list">
        <li ng-repeat="contact in contacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">           
          <div class="name">Contact 1</div>
          <ul class="contact-dropdown">
            <button ng-click="chatWithUser(contact)">Send Message</button>
          </ul>
        </li>                 
      </ul>

CSS

#contact-list {
  width: 150px;
  float:right;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;

}
#contact-list li {
  border-top: 1px solid #EBEBEB;
  list-style: none;
  padding: 3px 0;
  font-size: 14px;
  height: 38px;
  cursor: pointer;
  position: relative;
}
#contact-list li:hover {
  background-color: #EBEBEB;
}
#contact-list li .contact-dropdown {
    display:none;
  /*overflow: hidden;*/
  z-index: 10;
  background-color: #ffffff;
  border: 1px solid #BDBDBD;
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  margin-left: -100px;
  padding: 0;
  text-align: center;
  border-radius: 5px;
}

#contact-list li .contact-dropdown button:hover {
  background-color: #EBEBEB;
}

#contact-list li .name {
  padding: 5px 0;
  float: left;
}

JavaScript

$('#contact-list li').on('click', function () {
   console.log('hey'); 
    $('.contact-dropdown').toggle();
});