Context Menu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="container">
      <img alt="sample" src="https://via.placeholder.com/200x200">
      <nav class="dropdown layer--topright">
        <label class="dropdown-opener" for="menu-opener2"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></label>
        <input class="dropdown-toggle" type="checkbox">
        <ul class="dropdown-menu">
          <li><a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a></li>
          <li><a href="#"><i class="fa fa-share-alt" aria-hidden="true"></i>
              Share</a></li>
          <li><a href="#"><i class="fa fa-ban" aria-hidden="true"></i> Not interested</a></li>
        </ul>
      </nav>
    </div>

    <div class="container">
      <img alt="sample" src="https://via.placeholder.com/200x200">
      <nav class="dropdown layer--topright">
        <label class="dropdown-opener" for="menu-opener2"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></label>
        <input class="dropdown-toggle" type="checkbox">
        <ul class="dropdown-menu">
          <li><a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a></li>
          <li><a href="#"><i class="fa fa-share-alt" aria-hidden="true"></i>
              Share</a></li>
          <li><a href="#"><i class="fa fa-ban" aria-hidden="true"></i> Not interested</a></li>
        </ul>
      </nav>
    </div>
  </body>

</html>

CSS

.container {
  display: inline-block;
  position: relative;
}

.dropdown {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.dropdown-opener {
  cursor: pointer;
  user-select: none;
  position: absolute;
  right: 0;
}

.dropdown .dropdown-toggle,
.dropdown .dropdown-menu {
  display: none;
  list-style-type: none;
}

.dropdown .dropdown-toggle:checked+ul {
  display: block;
}

ul.dropdown-menu {
  background-color: #efefef;
  list-style-type: none;
  line-height: 1.5rem;
  border-radius: 3px;
  padding: 0;
  min-width: 60px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  -webkit-box-shadow: 2px 3px 3px -1px rgba(196, 186, 196, 1);
  -moz-box-shadow: 2px 3px 3px -1px rgba(196, 186, 196, 1);
  box-shadow: 2px 3px 3px -1px rgba(196, 186, 196, 1);
}

ul.dropdown-menu.show {
  display: block;
}

ul.dropdown-menu li a {
  text-decoration: none;
  color: #030303;
  width: 100%;
  float: left;
  padding: 7px 15px;
  box-sizing: border-box;
}

ul.dropdown-menu li a:hover {
  background: #ddd;
}

ul.dropdown-menu li a i {
  margin-right: 10px;
}

.style-scope .menu-renderer {
  --layout-inline_-_display: inline-flex;
  --icon-button-icon-height: 24px;
  --icon-button-icon-width: 24px;
  --spec-icon-active-other: #606060;
  --spec-icon-inactive: #909090;
  --spec-text-disabled: #909090;
  --spec-text-secondary: #606060;
  align-items: var(--layout-center-center_-_align-items);
  color: var(--menu-renderer-button-color, var(--spec-icon-inactive));
  cursor: pointer;
  display: var(--layout-inline_-_display);
  fill: var(--iron-icon-fill-color, currentcolor);
  width: var(--icon-button-icon-width, 100%);
  background: transparent;
}

JavaScript

$(document).ready(function() {
  $('.dropdown-opener').on('click', function() {
    $('.dropdown-menu').removeClass('show');
    $(this).parents('.dropdown').children('.dropdown-menu').toggleClass('show')
  });
  $(document).on('click', function(e) {
    if (!(e.target.matches('.dropdown-opener') || e.target.matches('.fa.fa-ellipsis-v'))) {
      $('.dropdown-menu').removeClass('show');      
    	//debugger;
    }
  });
});