JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <!-- <li class="menu-img"></li>-->
  <li>
    <a href="#">Первый Элемент</a>
  </li>
  <li>
    <a href="#">Второй Элемент</a>
  </li>
  <li>
    <a href="#">Третий Элемент</a>
  </li>
</ul>

CSS

* {
  box-sizing: border-box
}

.menu {
  position: relative;
  width: 200px;
  padding-top: 100px;
}

.menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100px;
  background: #eee;
}

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100px;
}

li:hover::before {
  display: block;
}

li:nth-child(1)::before {
  background: red;
}

li:nth-child(2)::before {
  background: green;
}

li:nth-child(3)::before {
  background: blue;
}