<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul:before {
  content:"";
  position: absolute;
  position-anchor: --li;
  border-radius: 50%;
  inset: auto calc(anchor(center) - .2em) anchor(bottom);
  aspect-ratio: 1;
  background: green;
  transition: .5s .8s,.5s .8s cubic-bezier(0,-900,1,-900) bottom;
}
ul li {
  position: relative;
}
ul li:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 100% 50% 0;
  border-radius: 50%;
  background: lightblue;
  transition: .8s;
}
ul li:nth-child(odd):before {
  background: pink;
}
ul li:is(:hover,.active):before {
  anchor-name: --li;
  inset: 0;
  border-radius: 0%;
  transition: .8s 1.3s;
}
ul:has(li:hover) li.active:not(:hover):before {
  anchor-name: none;
  inset: 100% 50% 0;
  border-radius: 50%;
  transition: .8s;
}

/* the hacky part of the code (related: https://css-tricks.com/advanced-css-animation-using-cubic-bezier/) */
ul:not(#_) li:nth-child(1):before{bottom: -.1px}
ul:not(#_) li:nth-child(2):before{bottom: -.2px}
ul:not(#_) li:nth-child(3):before{bottom: -.3px}
ul:not(#_) li:nth-child(4):before{bottom: -.4px}
ul:not(#_) li:nth-child(5):before{bottom: -.5px}

ul li a {
  color: #000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.6;
  padding-inline: .2em;
  display: block;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #f2f2f2;
  font-family: system-ui, sans-serif;
}