<ul id="nav-1"> 
    <li class="slide1"></li>         
    <li class="slide2"></li>
    <li><a href="#/">Alpha</a></li>
    <li><a href="#/">Beta</a></li>
    <li><a href="#/">Gamma</a></li>
    <li><a href="#/">Delta</a></li>
    <li><a href="#/">Epsilon</a></li>
</ul>
#nav-1 {
    position: relative;
    border: none;
    border-radius: 10em;
    display: flex;
    list-style: none;
    background: #f5f5f5;
    box-shadow: 20px 40px 40px #00000033;
    padding: 10px;
    li {
        margin: 0px;
        a {
            position: relative;
            padding: 0.6em 2em;
            font-size: 18px;
            border: none;
            outline:none;
            color: #333;
            display: inline-block;
            text-decoration: none;
            z-index: 3;
        }
    }
    .slide1,
    .slide2 {
        position: absolute;
        display: inline-block;
        height: 3em;
        border-radius: 10em;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
    }
    .slide1 {
        background-color: yellowgreen;
        z-index: 2;
    }
    .slide2 {
        opacity: 0;
        background: #ddd;
        z-index: 1;
    }
    .squeeze {
        transform: scale(0.9);
    }
}



// *************************************** Demo stuff

*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0;
    font-family: Montserrat, sans-serif;
    line-height: 1.5;
    background: linear-gradient(
        160deg,
        #4567b2 20%,
        #8ab9ff 20%,
        #8ab9ff 80%,
        #4567b2 80%
    );
}
View Compiled
$("#nav-1 a").on("click", function() {
  var position = $(this)
    .parent().position();
  var width = $(this)
    .parent().width();
  $("#nav-1 .slide1").css({ opacity: 1, left: +position.left, width: width });
});

$("#nav-1 a").on("mouseover", function() {
  var position = $(this)
    .parent().position();
  var width = $(this)
    .parent().width();
  $("#nav-1 .slide2").css({ 
    opacity: 1, left: +position.left, width: width })
    .addClass("squeeze");
});

$("#nav-1 a").on("mouseout", function() {
  $("#nav-1 .slide2").css({ opacity: 0 }).removeClass("squeeze");
});

var currentWidth = $("#nav-1")
  .find("li:nth-of-type(3) a")
  .parent("li")
  .width();
var current = $("li:nth-of-type(3) a").position();
$("#nav-1 .slide1").css({ left: +current.left, width: currentWidth });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js