Как я могу складывать div в относительный родительский div и показывать нижний div при наведении

Я считаю, что ваша проблема в том, что вы помещаете функцию наведения на div, а не на фактические поля.

Попробуй это:

<div>
<ul href = "">
  <li class = "boxesHover">Diversification</li>
  <li class = "boxesHover">Musical Chairs</li>
  <li class = "boxesHover">Telecome M&A</li>
  <li class = "boxesHover">Fake News</li>
</ul>

Мне удалось решить проблему с помощью моего профессора, он предложил гибкий бокс. Код ниже:

HTML:

<div class = "sidebar">

<div class = "boxes">
    <a href = "audience.html">
        <p>Audience</p>
        <ul class = "boxeshover">
          <li>Subscriptions</li>
          <li>Membership</li>
          <li>Global Footprint</li>
        </ul>
    </a>
  </div>

  <div class = "boxes">
    <a href = "methods.html">
      <p>Methods</p>
      <ul class = "boxeshover">
        <li>Profitability</li>
        <li>Data Practices</li>
        <li>Metrics of Success</li>
        <li>E-Commerce</li>
      </ul>
    </a>
  </div>

    <div class = "boxes">
      <a href = "industry.html">
        <p>Industry</p>
        <ul class = "boxeshover">
          <li>Diversification</li>
          <li>Musical Chairs</li>
          <li>Telecom M&A</li>
          <li>Fake News</li>
        </ul>
      </a>
    </div>

  </div>

CSS:

.sidebar {
  width: 20%;
  height: 100vh;
  position: fixed;
}

.boxes {
  width: 200px;
  height: 200px;
  background-color:#CDCDCD;
  margin: 5%;
  margin-left: 10%;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.boxes a {
  color: white;
  text-decoration: none;
  font-size: 20pt;
  font-family: sans-serif;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.boxeshover {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color:#C05746;
  color: white;
  font-size: 15pt;
  list-style-type: none;
  padding-left: 0;
  line-height: 175%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.boxes:hover .boxeshover {
    opacity: 1;
}