Responsive design 3D Flip Menu Pure CSS

 
<nav>
  <ol class="main-menu">
    <li class="main-item"><span class="home"></span></li>
    <li class="main-item"><span class="about"></span></li>
    <li class="main-item"><span class="widgets"></span>
      <ol class="sub-menu">
        <li class="sub-item item-left"><span class="small"></span></li>
        <li class="sub-item item-left"><span class="standart"></span></li>
        <li class="sub-item item-left"><span class="big"></span></li>
      </ol>
    </li>
    <li class="main-item"><span class="kabobs"></span>
      <ol class="sub-menu">
        <li class="sub-item item-right"><span class="premium"></span></li>
        <li class="sub-item item-right"><span class="combo"></span></li>
        <li class="sub-item item-right"><span class="special"></span></li>
      </ol>
    </li>
    <li class="main-item"><span class="contact"></span></li>
  </ol>
</nav>
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#000" rel="noopener noreferrer"></a>

@charset "UTF-8";
:root {
  --z24: translateZ(24.5px);
  --z80: translateZ(80px);
  --ts: all .5s ease;
  --x90: rotateX(90deg);
  --xm90: rotateX(-90deg);
  --y90: rotateY(90deg);
  --ym90: rotateY(-90deg);
}
 
nav {
  width: 100%;
  padding: 16px 16px 0 16px;
  position: relative;
}
 
ol {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
.main-menu {
  display: -webkit-box;
  display: flex;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row wrap;
  -webkit-box-pack: center;
          justify-content: center;
}
 
li {
  width: 160px;
  position: relative;
  cursor: pointer;
}
li span {
  width: 100%;
  height: 49px;
  display: block;
  position: relative;
  -webkit-transition: var(--ts);
  transition: var(--ts);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
li span::before, li span::after {
  width: 100%;
  padding: 16px 0;
  display: block;
  position: absolute;
  border-radius: 8px;
  font: 400 14px "Consolas";
  text-align: center;
  text-transform: uppercase;
}
 
.main-item:nth-of-type(2),
.main-item:nth-of-type(4) {
  margin: 0 2px;
}
 
.main-item:nth-of-type(3)::before,
.main-item:nth-of-type(4)::before {
  width: 100%;
  top: 25px;
  display: block;
  position: absolute;
  color: #fff;
  font: 400 24px "Consolas";
  text-align: center;
  -webkit-transition: var(--ts);
  transition: var(--ts);
  z-index: 100;
  content: "▾";
}
 
.main-item:hover > span {
  -webkit-transform: var(--x90);
          transform: var(--x90);
}
.main-item > span::before {
  background: #000;
  color: #fff;
  -webkit-transform: var(--z24);
          transform: var(--z24);
  box-shadow: 0 8px 6px -6px #888;
}
.main-item > span::after {
  background: #ff9900;
  -webkit-transform: var(--xm90) var(--z24);
          transform: var(--xm90) var(--z24);
}
 
.home::before, .home::after {
  content: "home";
}
 
.about::before, .about::after {
  content: "about";
}
 
.widgets::before, .widgets::after {
  content: "widgets";
}
 
.kabobs::before, .kabobs::after {
  content: "kabobs";
}
 
.contact::before, .contact::after {
  content: "contact";
}
 
.sub-menu {
  top: 51px;
  display: none;
  position: absolute;
}
.sub-menu li {
  opacity: 0;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}
.sub-menu li:nth-of-type(2) {
  margin: 2px 0;
}
 
.sub-item:nth-of-type(1) {
  -webkit-animation: fade 0.5s ease 0.2s both;
          animation: fade 0.5s ease 0.2s both;
}
 
.sub-item:nth-of-type(2) {
  -webkit-animation: fade 0.5s ease 0.4s both;
          animation: fade 0.5s ease 0.4s both;
}
 
.sub-item:nth-of-type(3) {
  -webkit-animation: fade 0.5s ease 0.6s both;
          animation: fade 0.5s ease 0.6s both;
}
 
@-webkit-keyframes fade {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
 
@keyframes fade {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.sub-item span::before {
  background: #008080;
  color: #fff;
  -webkit-transform: var(--z80);
          transform: var(--z80);
}
.sub-item span::after {
  background: #bc003b;
  color: #fff;
}
 
.item-left:hover span {
  -webkit-transform: var(--y90);
          transform: var(--y90);
}
.item-left span::after {
  -webkit-transform: var(--ym90) var(--z80);
          transform: var(--ym90) var(--z80);
}
 
.item-right:hover span {
  -webkit-transform: var(--ym90);
          transform: var(--ym90);
}
.item-right span::after {
  -webkit-transform: var(--y90) var(--z80);
          transform: var(--y90) var(--z80);
}
 
.small::before, .small::after {
  content: "small widgets";
}
 
.standart::before, .standart::after {
  content: "standart widgets";
}
 
.big::before, .big::after {
  content: "big widgets";
}
 
.premium::before, .premium::after {
  content: "premium kabobs";
}
 
.combo::before, .combo::after {
  content: "combo kabobs";
}
 
.special::before, .special::after {
  content: "special kabobs";
}
 
.main-item:nth-of-type(3):hover::before,
.main-item:nth-of-type(4):hover::before {
  color: #000;
  content: "▴";
}
.main-item:nth-of-type(3):hover .sub-menu,
.main-item:nth-of-type(4):hover .sub-menu {
  display: block;
}
 
@media screen and (min-width: 321px) and (max-width: 839px) {
  nav {
    width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 839px) {
  .main-item:nth-of-type(2),
  .main-item:nth-of-type(4) {
    margin: 3px 0;
  }
 
  .sub-menu {
    position: relative;
    top: 1px;
    padding: 2px 0 1px 0;
  }
  .sub-menu li span::before {
    -webkit-transform: var(--z24);
            transform: var(--z24);
  }
  .sub-menu li span::after {
    -webkit-transform: rotateY(0deg) var(--x90) var(--z24);
            transform: rotateY(0deg) var(--x90) var(--z24);
  }
  .sub-menu li:hover span {
    -webkit-transform: var(--xm90);
            transform: var(--xm90);
  }
}