как доделать меню на чистом css?

css * { 
  padding: 0; 
  margin: 0; 
  font-family: 'Federant', cursive; 
  font-size: 1vw; 
  color: white; 
} 
 
.menu { 
  margin: 5vw; 
  width: 10vw; 
} 
 
p { 
  border-bottom: 0.1vh solid white; 
  text-align: center; 
  padding: 1vh 1vw 1vh 1vw; 
  background: rgb(55, 100, 96); 
  width: 10vw; 
  height: 2vh; 
} 
 
.line, 
.line2, 
.line3 { 
  left: 12vw; 
  left: 1000%; 
  position: relative; 
} 
 
.line { 
  top: -12.3vh; 
} 
 
.line2 { 
  top: -28.7vh; 
} 
 
.line3 { 
  top: -45.1vh; 
} 
 
.list:hover~.line { 
  left: 12vw; 
} 
 
.list2:hover~.line2 { 
  left: 12vw; 
} 
 
.list3:hover~.line3 { 
  left: 12vw; 
} 
 
.line:hover { 
  left: 12vw; 
} 
 
.time { 
  transition: 0.1s; 
} 
 
.time2 { 
  transition: 0.2s; 
} 
 
.time3 { 
  transition: 0.3s; 
} 
 
.time4 { 
  transition: 0.4s; 
} 
 
.time5 { 
  transition: 0.6s; 
}

<div class="menu"> 
  <p class="list"> Paragraf</p> 
  <p class="list2"> Paragraf</p> 
  <p class="list3"> Paragraf</p> 
  <p class="linestop line time">Subparagraf</p> 
  <p class="linestop line time2">Subparagraf</p> 
  <p class="linestop line time3">Subparagraf</p> 
  <p class="linestop line time4">Subparagraf</p> 
  <p class="linestop line time5">Subparagraf</p> 
  <p class="line2 time">Subpar</p> 
  <p class="line2 time2">Subparagraf</p> 
  <p class="line2 time3">Subparagraf</p> 
  <p class="line2 time4">Subparagraf</p> 
  <p class="line2 time5">Subparagraf</p> 
  <p class="line3 time">Subparagraf</p> 
  <p class="line3 time2">Subparagraf</p> 
  <p class="line3 time3">Subparagraf</p> 
  <p class="line3 time4">Subparagraf</p> 
  <p class="line3 time5">Subparagraf</p> 
</div>