Sliding hover

This desktop menu has a sliding effect on hover. It is made with only CSS.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the menu to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting them into the cod-element in order to avoid FOUC as the code-element is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding/ul/li reset has been applied and the font is not defined.

HTML:

<div class="box-section">
  <ul class="box-ctn">
    <li class="box">
      <a class="link-menu" href="#">MENU A</a>
    </li>
    <li class="box">
      <a class="link-menu" href="#">MENU B</a>
    </li>
    <li class="box">
      <a class="link-menu" href="#">MENU C</a>
    </li>
    <li class="box">
      <a class="link-menu" href="#">MENU D</a>
    </li>
    <div class="box-slide"></div>
  </ul>
</div>

CSS:

:root {
  --li-items: 4; /*enter the number of menu li items*/
}
.box-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  z-index: 0;
  background-color: #202020;
}
.box-ctn {
  display: flex;
  position: relative;
  flex-direction: row;
  position: relative;
  overflow: hidden;
  width: 30%;
  height: 85px;
  border-radius: 50px;
  box-shadow: 15px 15px 29px #101010, -15px -15px 29px #303030;
}
.box {
  width: calc(100% / var(--li-items));
  height: 100%;
  list-style: none;
  z-index: 1;
}
.link-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
}
.box-slide {
  content: "";
  position: absolute;
  width: calc(100% / var(--li-items));
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: all 0.3s linear;
}
.box:nth-child(1),
.box:nth-child(2),
.box:nth-child(3) {
  border-right: 0.5px solid rgba(255, 255, 255, 0.4);
}
.box:nth-child(1):hover ~ .box-slide {
  left: 0%;
}
.box:nth-child(2):hover ~ .box-slide {
  left: 25%;
}
.box:nth-child(3):hover ~ .box-slide {
  left: 50%;
}
.box:nth-child(4):hover ~ .box-slide {
  left: 75%;
}

.box:nth-child(n):hover ~ .box-slide {
  opacity: 1;
  transition: all 0.4s linear;
}
.box:nth-child(n):active ~ .box-slide {
  background: tomato;
}
/* .box:nth-child(n):active ~ .box-slide {
  background: tomato;
} */

@media screen and (max-width: 1360px) {
  .box-ctn {
    width: 50%;
  }
}
@media screen and (max-width: 991px) {
  .box-ctn {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  .box-ctn {
    width: 90%;
  }
}