JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="contact-list">
        <li ng-repeat="contact in contacts | filter: filterContacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">
          	
            <img ng-src="{{ getUserImagePath( contact ) }}">
            
          </div>
          <div class="name">{{ contact.username }}</div>

          <ul class="contact-dropdown">
            <span class="tail"></span>
            <button ng-click="chatWithUser(contact)" ng-disabled="!isChatAvailableForTheContact(contact)">{{ !contact.isOnline ? 'Leave a' : 'Instant' }} Message</button>
            <button ng-click="callUser(contact)" ng-disabled="!isCallAvailableForTheContact(contact)">Video Call</button>
            <!-- <li ng-click="addParticipant(contact)" ng-disabled="!isContactAvailableToAddToConversation(contact)"><a href="#">Add Participant</a></li> -->
            <!-- Invite to Conference should only be shown if currently in a video call -->
            <button ng-click="inviteToConference(contact)" ng-disabled="!isContactAbleToJoinTo_Conference(contact)">Invite to Conference</button>
            <button ng-click="removeContact(contact)" ng-controller="removeContactModalController">Remove from Contacts</button>
          </ul>
        </li>
          <li ng-repeat="contact in contacts | filter: filterContacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">
          <div class="profilepic img-circle {{ contact.status == 'online' ? 'online'  : contact.status == 'away' ? 'away' : contact.status == 'dnd' ? 'dnd' : 'offline' }}">
          	
          	<!-- Put user profile pic here. If null, and user is male, use: /profileTheme/images/gen_profile_pic_1.jpg. If female, use /profileTheme/images/gen_profile_pic_0.jpg -->
            <img ng-src="{{ getUserImagePath( contact ) }}">
            
          </div>
      ...

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 {
  width: 100%;
  color: #0077CC;
  background: none;
  border: none;
  cursor: pointer;
  list-style: none;
  padding: 5px 0px;
  height: auto;
  font-size: 12px;
}
#contact-list li .contact-dropdown button:hover {
  background-color: #EBEBEB;
}
#contact-list li .contact-dropdown button:disabled {
  color: gray;
}
#contact-list li .contact-dropdown .tail {
  width: 10px;
  height: 22px;
  display: block;
  top: 6px;
  right: -10px;
  position: absolute;
}
#contact-list li .name {
  padding: 5px 0;
  float: left;
}

JavaScript

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