Context Menu

<ul class="nuda-ctx">
  <li class="nuda-ctx__item">Cut <span class="nuda-ctx__hint">⌘X</span></li>
  <li class="nuda-ctx__item">Copy <span class="nuda-ctx__hint">⌘C</span></li>
  <li class="nuda-ctx__item">Paste <span class="nuda-ctx__hint">⌘V</span></li>
  <li class="nuda-ctx__sep"></li>
  <li class="nuda-ctx__item nuda-ctx__item--danger">Delete</li>
</ul>

.nuda-ctx {
  list-style: none;
  margin: 0;
  padding: .35rem;
  min-width: 180px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.7);
  animation: _ctxIn .16s ease-out;
}

.nuda-ctx__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem .6rem;
  border-radius: 6px;
  font-size: .8rem;
  color: #cfcfcf;
  cursor: pointer;
}

.nuda-ctx__item:hover {
  background: rgba(228,255,84,.1);
  color: #fafafa;
}

.nuda-ctx__hint {
  font-size: .7rem;
  color: #666;
  font-family: ui-monospace,monospace;
}

.nuda-ctx__sep {
  height: 1px;
  margin: .3rem .2rem;
  background: rgba(255,255,255,.08);
}

.nuda-ctx__item--danger {
  color: #ff6b6b;
}

.nuda-ctx__item--danger:hover {
  background: rgba(255,107,107,.12);
  color: #ff8787;
}

@keyframes _ctxIn {
  from {
    opacity: 0;
    transform: scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ctx {
    animation: none;
  }
}