SOURCE

$(function(){
  $('.content').click(function(){
    $(this).find('.subMenuWrap').toggleClass('show');
  })
})

<ul>
  <li>
    <div class="content">
      <div class="centerButton">a</div>
      <div class="subMenuWrap">
        <div class="subMenu">1</div>
        <div class="subMenu">2</div>
        <div class="subMenu">3</div>
        <div class="subMenu">4</div>
      </div>
    </div>
  </li>
  <li>
    <div class="content show">
      <div class="centerButton">a</div>
      <div class="subMenuWrap show">
        <div class="subMenu">1</div>
        <div class="subMenu">2</div>
        <div class="subMenu">3</div>
        <div class="subMenu">4</div>
      </div>
    </div>
  </li>
  <li>
    <div class="content">
      <div class="centerButton">a</div>
      <div class="subMenuWrap">
        <div class="subMenu">1</div>
        <div class="subMenu">2</div>
        <div class="subMenu">3</div>
        <div class="subMenu">4</div>
      </div>
    </div>
  </li>
  <li>
    <div class="content">
      <div class="centerButton">a</div>
      <div class="subMenuWrap">
        <div class="subMenu">1</div>
        <div class="subMenu">2</div>
        <div class="subMenu">3</div>
        <div class="subMenu">4</div>
      </div>
    </div>
  </li>
  </ul>

*{
  padding: 0;
  margin:0;
  list-style:none;
}
html,body{
  height: 100%;
}
body{
  display: flex;
  align-items:center;
}
ul{
  width: 100%;
  display: flex;
  justify-content: space-around;
  li{
    float: left;
  }
  .content{
    width: 100px;
    height: 100px;
    position: relative;
    color: #fff;
    .centerButton{
      width: 100px;
      height: 100px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:#4F88A1;
      z-index:10;
      box-shadow: inset #4F88A1 0 0 0 2px, inset #92CCE0 0 0 0 4px;
    }
    .subMenuWrap{
      position: absolute;
      background-color: rgba(0,255,0,0.5);
      width: 160px;
      height: 160px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.4);
      transition: all 0.38s;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      box-shadow: #4F88A1 0 0 0 2px,#92CCE0 0 0 0 4px, #4F88A1 0 0 0 8px;
      
      &.show{
        transform: translate(-50%, -50%) scale(1);
      }
      .subMenu{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        &:nth-child(odd){
          background-image: linear-gradient(#92CCE0, #67B0CF, #92CCE0);
          &:before,&:after{
            content: '';
            display: block;
            width: 43px;
            height: 43px;
            position: absolute;
            transform: rotate(45deg);
          }
        }
        &:nth-child(even){
          background-image: linear-gradient(90deg, #92CCE0, #67B0CF, #92CCE0);
          &:before,&:after{
            content: '';
            display: block;
            width: 43px;
            height: 43px;
            position: absolute;
            transform: rotate(45deg);
          }
        }
        &:nth-child(1){
          width: 100px;
          height: 30px;
          top: 0;
          &:before{
            left: -21px;
            top: -21px;
            background-image: linear-gradient(-45deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: inset #4F88A1 0px -1px;
          }
          &:after{
            right: -21px;
            top: -21px;
            background-image: linear-gradient(-45deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: inset #4F88A1 -1px 0px;
          }
        }
        &:nth-child(2){
          width: 30px;
          height: 100px;
          right: 0;
          &:before{
            right: -21px;
            top: -21px;
            background-image: linear-gradient(45deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: #4F88A1 -1px 0px;
          }
          &:after{
            right: -21px;
            bottom: -21px;
            background-image: linear-gradient(45deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: inset #4F88A1 0px -1px;
          }
        }
        &:nth-child(3){
          width: 100px;
          height: 30px;
          bottom: 0;
          &:before{
            left: -21px;
            bottom: -21px;
            background-image: linear-gradient(135deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: inset #4F88A1 1px 0 0px;
          }
          &:after{
            right: -21px;
            bottom: -21px;
            background-image: linear-gradient(135deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: inset #4F88A1 0px 1px 0px 0px;
          }
        }
        &:nth-child(4){
          width: 30px;
          height: 100px;
          left: 0;
          &:before{
            left: -21px;
            top: -21px;
            background-image: linear-gradient(-135deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
            box-shadow: #4F88A1 0px -1px 0px 0px;
          }
          &:after{
            left: -21px;
            bottom: -21px;
            background-image: linear-gradient(-135deg, #92CCE0 0px, #67B0CF 25%, #92CCE0 50%);
          }
        }
      }
    }
  }
}