Помогите сверстать элемент

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  max-width: 100%; 
} 
 
.items { 
  width: 90%; 
  margin: 30px auto; 
  height: auto; 
  display: flex; 
  position: relative; 
} 
 
.item { 
  width: 100%; 
  height: 200px; 
} 
 
.sub { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  width: 100%; 
  height: 220px; 
  display: none; 
} 
 
.item1 { 
  background: red; 
} 
 
.item2 { 
  background: green; 
} 
 
.item3 { 
  background: blue; 
} 
 
.subitem1 { 
  background: blue; 
} 
 
.subitem2 { 
  background: red; 
} 
 
.subitem3 { 
  background: green; 
} 
 
.item1:hover~.subitem2 { 
  display: block; 
  z-index: 100; 
} 
 
.item2:hover~.subitem3 { 
  display: block; 
  z-index: 100; 
} 
 
.item3:hover~.subitem1 { 
  display: block; 
  z-index: 100; 
} 
 
p { 
  width: 80%; 
  margin: auto; 
  font-size: 1.6em; 
}

<div class="items"> 
  <div class="item item1"></div> 
  <div class="item item2"></div> 
  <div class="item item3"></div> 
 
  <div class="sub subitem3"></div> 
  <div class="sub subitem2"></div> 
  <div class="sub subitem1"></div> 
</div> 
 
<p> 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, dolor praesentium soluta beatae asperiores vitae, nam nostrum obcaecati minus modi! Iusto aut deleniti velit libero ipsam quod, accusantium quia. Eos quos eum dolores dicta, nesciunt, debitis 
  in harum pariatur a nisi impedit labore molestiae. Totam, placeat. Asperiores praesentium distinctio similique accusamus tempore, atque placeat quo veniam aperiam. Explicabo, possimus perferendis. 
</p>

:root { 
  --size: 10rem; 
} 
 
* { 
  margin: 0; 
  padding: 0; 
} 
 
.list { 
  display: flex; 
  position: absolute; 
  left: 0.2rem; 
  top: 100%; 
  width: calc(var(--size) * 3.1); 
  border: 1px solid; 
  visibility: hidden; 
} 
 
ul {   
  list-style-type: none; 
  margin-right: 0.5rem; 
} 
 
.wrapper { 
  display: flex; 
  position: relative; 
  margin: 1rem; 
} 
 
.item { 
  width: var(--size); 
  height: var(--size); 
  border: 1px solid; 
  cursor: pointer; 
  text-align: center; 
  line-height: var(--size); 
  margin: 0.2rem; 
} 
 
.item:hover~.list { 
  visibility: visible; 
}

<div class="wrapper"> 
  <div class="card"> 
    <div class="item">1</div> 
    <div class="list"> 
      <ul> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
      </ul> 
    </div> 
  </div> 
  <div class="card"> 
    <div class="item">2</div> 
    <div class="list"> 
      <ul> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
      </ul> 
      <ul> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
      </ul> 
    </div> 
  </div> 
  <div class="card"> 
    <div class="item">3</div> 
    <div class="list"> 
      <ul> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
      </ul> 
      <ul> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
      </ul> 
      <ul> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
        <li><a>link</a></li> 
      </ul> 
    </div> 
  </div> 
</div>