A CodePen by Bobby. Delete menu with modal dialog box. - still playing with input:checkbox modal dialog box implementation. The Trash Can it self inspired by Google Chrome Extension Manager. Inspired by: Google Chrome extension trash can.

index.html

<div class="container">
  <label for="delete">
    <div class="wrapper">
      <div class="lid"></div>
      <div class="can"></div>
      <span>delete</span>
    </div>
  </label>
  <input type="checkbox" name="" id="delete">
  <div class="dialog">
    <h4>are you sure?</h4>
    <ul>
      <li><label for="delete">Yes</label></li>
      <li><label for="delete">No</label></li>
    </ul>
  </div>
</div>

script.js

/*
still playing with input:checkbox modal dialog box implementation. The Trash Can it self inspired by Google Chrome Extension Manager. 

full view: http://codepen.io/ImBobby/full/lJfCB

Inspired by: Google Chrome extension trash can.
*/

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

*{
  box-sizing: border-box;
}
*:before,
*:after{
  box-sizing: border-box;
}
html,body{
  min-height: 100%;
  user-select: none;
  font-family: 'Open Sans Condensed';
}
body{
  background-image: radial-gradient(mintcream 0%, lightgrey 100%);
}
.container{
  position: relative;
  display: table;
  margin: 12% auto;
}
.wrapper{
  position: relative;
  cursor: pointer;
}
.lid{
  position: relative;
  top: 2px;
  width: 24px;
  height: 6px;
  background: white;
  border: solid 2px rgb(100,100,100);
  transition: all .2s ease-in-out;
  transform-origin: left;
  transform: rotate(0deg) translateY(0px);
}
.lid:before,
.lid:after{
  content: '';
  position: absolute;
}
.lid:before{
  width: 10px;
  height: 5px;
  top: -5px;
  left: 5px;
  background: rgb(100,100,100);
}
.lid:after{
  width: 6px;
  height: 4px;
  top: -3px;
  left: 7px;
  background: white;
}
.can{
  position: relative;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border: solid 2px rgb(100,100,100);
  border-radius: 0 0 3px 3px;
}
.can:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  box-shadow: 4px 5px 0px 1px rgb(100,100,100),
    4px 7px 0px 1px rgb(100,100,100),
    4px 9px 0px 1px rgb(100,100,100),
    4px 11px 0px 1px rgb(100,100,100),
    4px 13px 0px 1px rgb(100,100,100),
    8px 5px 0px 1px rgb(100,100,100),
    8px 7px 0px 1px rgb(100,100,100),
    8px 9px 0px 1px rgb(100,100,100),
    8px 11px 0px 1px rgb(100,100,100),
    8px 13px 0px 1px rgb(100,100,100),
    12px 5px 0px 1px rgb(100,100,100),
    12px 7px 0px 1px rgb(100,100,100),
    12px 9px 0px 1px rgb(100,100,100),
    12px 11px 0px 1px rgb(100,100,100),
    12px 13px 0px 1px rgb(100,100,100);
}
span{
  position: absolute;
  background: rgb(100,100,100);
  color: white;
  font: normal 10px/15px Arial;
  padding: 2px 4px;
  border-radius: 2px;
  left: -6px;
  bottom: 0px;
  opacity: 0;
  z-index: -1;
  transition: all .4s ease .4s;
}
input{
  display: none;
}
.wrapper:hover .lid{
  transform: rotate(-30deg) translateY(-2px);
}
.wrapper:hover span{
  bottom: -22px;
  opacity: 1;
}
.dialog{
  width: 200px;
  height: auto;
  padding-bottom: 20px;
  background: rgb(250,250,250);
  border: solid 1px rgb(100,100,100);
  border-radius: 3px;
  position: absolute;
  text-align: center;
  left: -85px;
  top: -350px;
  opacity: 0;
  box-shadow: 0 0 5px 2px rgb(150,150,150);
  transition: all .5s ease-in-out;
}
h4{
  color: rgb(100,100,100);
  font: bold 15px/40px 'Open Sans Condensed', sans-serif;
  text-transform: none;
}
ul{list-style: none;}
li{
  display: inline-block;
  border-radius: 2px;
  width: 50px;
}
li > label{
  display: block;
  padding: 2px 4px;
  color: white;
  font: normal 12px Arial;
  cursor: pointer;
}
li:nth-child(1){
  background-image: linear-gradient(rgb(0,150,0) 0%,rgb(0,100,0) 100%);
  box-shadow: 0 2px 0px rgb(0,50,0);
}
li:nth-child(1):hover{
  background: rgb(0,150,0);
}
li:nth-child(1):active{
  box-shadow: inset 0 2px 0px rgb(0,50,0);
}
li:nth-child(2){
  background-image: linear-gradient(rgb(150,0,0) 0%,rgb(100,0,0) 100%);
  box-shadow: 0 2px 0px rgb(50,0,0);
}
li:nth-child(2):hover{
  background: rgb(150,0,0);
}
li:nth-child(2):active{
  box-shadow: inset 0 2px 0px rgb(50,0,0);
}
input[type='checkbox']:checked + .dialog{
  opacity: 1;
  top: -20px;
}