<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="./test.css">
	<title>Test</title>
</head>
<body>
	

<nav class="navbar">
	<ul class="navbar-container">
		<li class="navbar-item">Home<span class="navbar-item_label">Home</span></li>
		<li class="navbar-item">Services<span class="navbar-item_label">Services</span>
			<ul class="navbar-container_sub">
				<li class="navbar-item_sub">Service 1</li>
				<li class="navbar-item_sub">Service 2</li>
				<li class="navbar-item_sub">Service 3</li>
			</ul>
		</li>
		<li class="navbar-item">Products<span class="navbar-item_label">Products</span>
			<ul class="navbar-container_sub">
				<li class="navbar-item_sub">Product 1</li>
				<li class="navbar-item_sub">Product 2</li>
				<li class="navbar-item_sub">Product 3</li>
			</ul>
		</li>
		<li class="navbar-item">About<span class="navbar-item_label">About</span></li>
	</ul>
</nav>
</body>
</html>
$color1: #64d3c3;
$color2: #fbf144;
$color3: #6a3696;
$color4: #8cc7b6;
$color5: #8c7c6c;

body, html, nav, ul, li, span{
      font-size: 10px;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      background-color: $color1;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      border: none;
}

.navbar{
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 70rem;
      margin-top: 10vw;
      transition: all .5s ease;

      &-container{
            list-style: none;
            display: flex;
            justify-content: center;
            perspective: 50rem;
            background-color: darken($color: $color1, $amount: 20);
            box-shadow: 0 0 19px 11px rgba(0,0,0,0.2);

            &_sub{
                  position: absolute;
                  width: 100%;
                  list-style: none;
                  border-radius: 0 0 5px 5px;
                  top: 100%;
                  left: 0;
                  padding: 0;
                  transform: rotateY(180deg) scaleY(0);
                  transform-origin: top;
                  opacity: 0;
                  visibility: hidden;
                  transition: all .7s ease;
                  box-shadow: 0 0 19px 11px rgba(0,0,0,0.2);
            }

      }
      &-item{
            flex-grow: 1;
            padding: 1rem;
            font-size: 2rem;
            background-color: $color3;
            font-weight: bold;
            text-align: center;
            // color: darken($color: $color1, $amount: 20);
            color: whitesmoke;
            transition: all .7s ease;
            transform: rotateY(0deg);
            position: relative;
            z-index: 1;
            cursor: pointer;
            
            &:hover{
                  transform: rotateY(180deg);
                  
                  & > .navbar-container_sub{
                        transform: rotateY(180deg) scaleY(1);
                        opacity: 1;
                        visibility: visible;
                  }

                  & > .navbar-item_label {
                        transform: scaley(1) rotateY(180deg);
                        opacity: 1;
                        visibility: visible;
                  }
            }
            &_sub{
                  padding: 1rem;
                  font-size: 2rem;
                  background-color: transparent;
                  position: relative;
                  overflow: hidden;
                  color: whitesmoke;
                  text-align: end;
                  transition: color .3s ease-in;
                  &:hover {
                        color: $color3;
                  }
                  &:after{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -2;
                        background-color: $color4;
                  }

                  &:before{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 120%;
                        width: 120%;
                        height: 100%;
                        z-index: -1;
                        background-color: $color2;
                        transform: skewX(-30deg);
                        transform-origin: right;
                        transition: all .3s ease-in;
                  }

                  &:hover:before{
                        left: -10%;
                  }
            }

            &_label{
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  padding: inherit;
                  font-size: inherit;
                  font-weight: bold;
                  text-align: right;
                  transform: scaleY(0) rotateY(180deg);
                  transform-origin: top;
                  opacity: 0;
                  visibility: hidden;
                  transition: all .4s ease .1s;
                  background-color: $color2;
                  color: $color3;
            }
      }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.