サイドバー - テキストがバーの上に重なっています

Question

この左側のサイドバーのテキストは、想定されているバーをトランスフィックスしています。 テキストを重複することなく区画（li）内に配置するのに役立つ必要があります。ちょうどそれを調整する必要があります。 私はすでにfont-size％を持っていますが、まだ動作していません。 ありがとうございました！

.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;