<nav class="menu">
  <ol>
    <li class="menu-item"><a href="#0">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Big Widgets</a></li>
        <li class="menu-item"><a href="#0">Bigger Widgets</a></li>
        <li class="menu-item"><a href="#0">Huge Widgets</a></li>
      </ol>
    </li>
    <li class="menu-item">
      <a href="#0">Kabobs</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Shishkabobs</a></li>
        <li class="menu-item"><a href="#0">BBQ kabobs</a></li>
        <li class="menu-item"><a href="#0">Summer kabobs</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#0">Contact</a></li>
  </ol>
</nav>
$gradient-start :#ed6ea0;
$gradient-end :#ec8c69;
body{
    display: flex;
    height: 100vh;
    padding: 0 5rem;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-image: #fff;
    font-family: 'Open Sans', sans-serif;
}
.menu{
  background-image: linear-gradient(to right, $gradient-start 0%, $gradient-end 100%);
  border-radius:0.5rem;
  text-transform: uppercase;
  box-shadow: inset 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
  a{
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    &:focus,
    &:focus-within{
      outline:none;
    }
  }
  > ol{
    display:flex;
    > li {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
@media(min-width: 45rem){
  .menu{
    > ol{
      justify-content: space-around;
      &:hover,
      &:focus-within{
        > li:first-child{
          > a{
              opacity:0.6;
          }
        }
      }
      > li {
        flex: 1 1 0;
        &:last-child:after {
          content: '';
          position: absolute;
          top: 0;
          width: 100%;
          bottom: 0;
          margin-right: -50%;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 0.5rem;
          z-index: 0;    
          transition: 350ms cubic-bezier(1, 0.49, 0.09, 1.29) all;
          pointer-events: none;
        }
        @for $i from 1 to 12 {
          &:first-child:nth-last-child( #{$i} ) ~ li:last-child:after{          
                right: 50% + 100% * ($i - 1);
            }
        }
        @for $i from 1 to 12 {
          &:first-child:nth-last-child( #{$i} ),
          &:first-child:nth-last-child( #{$i} ) ~ li{          
            @for $j from 1 to $i {
              &:nth-child( #{$j} ):hover,
              &:nth-child( #{$j} ):focus,
              &:nth-child( #{$j} ):focus-within{     
                ~ li:last-child:after{
                  right: 50% + 100% * ($i - $j);
                }
                > ol a{
                  box-shadow: inset 0 0 0 3rem rgba(0, 0, 0, 0), inset 0 0 0 3rem rgba(237, 110, 160, (1 - (1/$i)*$j));
                  &:hover,
                  &:focus,
                  &:focus-within{
                  box-shadow: inset 0 0 0 3rem rgba(0, 0, 0, 0.1), inset 0 0 0 3rem rgba(237, 110, 160, (1 - (1/$i)*$j));
                  }
                }
              } 
              &:last-child:hover:after,
              &:last-child:focus:after,
              &:last-child:focus-within:after{
                right: 50%;
              }
            }
          }
        }
        &:first-child{
          > a{
              opacity:1;
          }
        }
        > a{
          padding: 2rem 0;
          font-size: 1.6vw;
          position: relative;
          width: 100%;
          text-align: center;
          z-index: 1;
          opacity:0.7;
          transition: 250ms ease all;
        }
        > ol{
          position:absolute;
          top:100%;
          left:0;
          width: 100%;
          visibility: hidden;
          > li{
            margin-top:0.5rem;
            transition: 250ms cubic-bezier(0.42, 0.83, 0.49, 1.35) transform;
            transform: scale(0);
            > a{            
              display: block;
              text-align: center;
              border-radius: 0.2rem;
              padding: 1rem 0.5rem;
              font-size: 1.4vw;
              background: $gradient-end;
              color: rgba(255,255,255,0.6);
              transition: 250ms ease all;
              &:hover,
              &:focus,
              &:focus-within{
                box-shadow: inset 0 0 0 3rem rgba(0,0,0,0.1);
                color: rgba(255,255,255,1);
              }
            }
          }
        }
        &:hover,
        &:focus,
        &:focus-within{
            > a{
              opacity: 1 !important;
            }
            > ol{    
              visibility: visible;  
              > li{
                transform: scale(1);
                &:first-child{
                  transition-delay: 150ms;
                }
              }
              @for $k from 1 to 12 {
                > li:nth-child( #{$k} ){ 
                  transition-delay: 150ms * $k;
                }
              }
            }
        }
      }
    }
  }
}
@media(max-width: 45rem){
  .menu{
    background-image: linear-gradient(to bottom, $gradient-start 0%, $gradient-end 100%);
    a{
      font-size:1.4rem;
      padding: 1rem 0.5rem;
    }
    > ol{
      flex-direction: column;
      > li {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        > a:nth-last-child(2){
          position:relative;
          &:after{
            content:'';
            position:absolute;
            top: 50%;
            margin-top: -0.25rem;
            right: 1.5rem;
            border-top: 0.5rem solid #fff;
            border-left: 0.3rem solid transparent;
            border-right: 0.3rem solid transparent;
            transition: 250ms ease all;
          }
        }
        &:focus-within,
        &:focus,
        > a:hover,
        > a:focus-within,
        > a:focus{
          &:nth-last-child(2){
            &:after{
              transform: rotate(180deg);
            }
          }
          + ol{
            max-height: 12rem;
          }
        }
        > ol{
          background: rgba(0,0,0,0.1);
          box-shadow: inset 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
          overflow:hidden;
          max-height:0;
          transition: 250ms ease all;
          > li{
            a{
              display:block;
              font-size:1.2rem;
            }
          }
        }
      }
    }
  }
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:300,400

External JavaScript

This Pen doesn't use any external JavaScript resources.