<ul class="menu">
  <li class="menu__spacer menu__spacer--top"></li>
  <li class="menu__item">
    <div class="menu__bg"></div>
    <a href="#" class="menu__link">Lorem, ipsum dolor</a>
  </li>
  <li class="menu__item">
    <div class="menu__bg"></div>
    <a href="#" class="menu__link">Debitis deserunt consequuntur</a>
  </li>
  <li class="menu__item">
    <div class="menu__bg"></div>
    <a href="#" class="menu__link">Doloremque eveniet </a>
  </li>
  <li class="menu__item">
    <div class="menu__bg"></div>
    <a href="#" class="menu__link">impedit laudantium in neque</a>
  </li>
  <li class="menu__spacer menu__spacer--bottom"></li>
</ul>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.menu {
  width: 480px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  padding-left: 32px;
  overflow: hidden;
}

.menu__spacer {
  background-color: #000;
  transition: border-radius 0.5s;
}

.menu__spacer--top {
  height: 84px;
  border-radius: 25px 25px 0 0;
}

.menu__spacer--bottom {
  height: 184px;
  border-radius: 0 0 25px 25px;
}

.menu__item {
  position: relative;
  background-color: #000;
  height: 42px;
  padding: 0 32px 0 32px;
  z-index: 0;
  transition: border-radius 0.5s;
}

.menu__bg {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 16px);
  height: 100%;
  background-color: #ff9800;
  z-index: -1;
  transform: translateX(calc(-100% - 32px));
  border-radius: 21px;
  transition: transform 0.5s;
}

.menu__link {
  line-height: 42px;
  text-decoration: none;
  color: #fff;
  font-size: 1.5em;
}

const menu = document.querySelector(".menu");

menu.addEventListener("mouseover", (e) => hoverMenu(e.target, true));
menu.addEventListener("mouseout", (e) => hoverMenu(e.target, false));

function hoverMenu(target, isIn = true) {
  if (!target.classList.contains("menu__link")) return;

  const liEl = target.closest(".menu__item");
  if (!liEl) return;

  const bgEl = liEl.querySelector(".menu__bg");
  if (!bgEl) return;

  const tx = isIn ? "-16px" : "calc(-100% - 32px)";
  bgEl.style.transform = `translateX(${tx})`;

  const br = isIn ? 21 : 0;

  const topSibling = liEl.previousElementSibling;
  if (topSibling) {
    topSibling.style.borderBottomLeftRadius = br + "px";
  }

  const bottomSibling = liEl.nextElementSibling;
  if (bottomSibling) {
    bottomSibling.style.borderTopLeftRadius = br + "px";
  }

  liEl.style.borderTopLeftRadius = br + "px";
  liEl.style.borderBottomLeftRadius = br + "px";
}