Delayed context menu

by Mohammed Ismail Ansari

HTML

<div id="trigger">

  <div id="target">

  </div>
  
</div>

CSS

#trigger {
  width: 30px;
  height: 30px;
  background: red;
}

#target {
  position: fixed;
  right: 100px;
  bottom: 0px;
  width: 100px;
  height: 200px;
  border: 1px solid #404040;
  background: gray;
  visibility: collapse;
  transition: 1s;
}

#trigger:hover #target {
  visibility: visible;
}