사이드 바 - 텍스트가 바를 겹치고 있습니다.

Question

왼쪽 사이드 바에있는 텍스트는 바가있는 곳을 바꿔 치기합니다. 텍스트를 겹치지 않고 구획 (li) 내에 배치하는 데 도움이 필요합니다. 그냥 조정할 필요가있어. 글꼴 크기가 %이지만 아직 작동하지 않습니다. 감사합니다.

.menuleft { 
 
    background-color: #CDD0D2; 
 
    list-style-type: none; 
 
    position: absolute; 
 
    width: 9%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
.menuleft ul{ 
 
    display: table-cell; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
} 
 
.text { 
 
    -webkit-box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22); 
 
    -moz-box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22); 
 
    box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22); 
 
    width: 100%; 
 
    height: 17%; 
 
    font-size: 2.5vw; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    background-color: #F06D22; 
 
} 
 
.menuleft li a { 
 
    font-family: Futura LT,'Trebuchet MS', Arial; 
 
    font-size: 80%; 
 
    letter-spacing: 0.28vw; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    height: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    vertical-align: middle; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    writing-mode: tb-rl; 
 
    -webkit-transform:rotate(180deg); 
 
    -moz-transform:rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    -ms-transform:rotate(180deg); 
 
    transform: rotate(180deg); 
 
    white-space:nowrap; 
 
} 
 

 
.menuleft li:hover { 
 
    text-decoration: none; 
 
    background: #0094D4; 
 
} 
 
.menuleft li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.whitebar{ 
 
    text-decoration: none; 
 
    display: table; 
 
    width: 100%; 
 
    height: 0.5%; 
 
    background-color: #fff; 
 
    writing-mode:tb-rl; 
 
    -webkit-transform:rotate(90deg); 
 
    -moz-transform:rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform:rotate(90deg); 
 
    transform: rotate(180deg); 
 
    white-space:nowrap; 
 
    bottom:0; 
 
    margin: 0 auto; 
 
}

<div class="menuleft"> 
 
     <ul> 
 
      <li class="text"> 
 
       <a href="#">Eficácia</a> 
 
      </li> 
 
      <li class="whitebar"> 
 
      </li> 
 
      <li class="text"> 
 
       <a href="#">Rapidez</a> 
 
      </li> 
 
      <li class="whitebar"> 
 
      </li> 
 
      <li class="text"> 
 
       <a href="#">Impacto <br> na vida real</a> 
 
      </li> 
 
      <li class="whitebar"> 
 
      </li> 
 
      <li class="text"> 
 
       <a href="#">Tecnologia <br> avançada</a> 
 
      </li> 
 
      <li class="whitebar"> 
 
      </li> 
 
      <li class="text"> 
 
       <a href="#">Segurança</a> 
 
      </li> 
 
     </ul> 
 
    </div>

Answer 1

변화율 : 폰트 크기 : 2.5vw; to : font-size : 2.5vh;