세로 텍스트가있는 항목의 위치 지정 - 호버/절대 위치 지정

Question

세로 목록 요소가있는 목록을 만드는 것이 좋습니다. 다른 항목을 이동하지 않고도 마우스를 올려 놓았을 때 목록의 다른 항목을 축척하고 겹치기를 원합니다. 좀 진전이 항목 중 하나를 가리킬 때 항목이 아래로 뛰어 왜 여전히 알아낼 수 없습니다

http://jsfiddle.net/saqibmbhatti/P74GG/6/

<ul> 

    <li> 
    <div class="placeholder"> 
     <span class="rotated-text">Item - 1</span> 
    </div> 
    </li> 

    <li> 
    <div class="placeholder"> 
     <span class="rotated-text">Item - 2</span> 
    </div> 
    </li> 

    <li> 
    <div class="placeholder"> 
     <span class="rotated-text">Item - 3 is long</span> 
    </div> 
    </li> 

    <li> 
    <div class="placeholder"> 
     <span class="rotated-text">Item - 4 is longer</span> 
    </div> 
    </li> 

</ul> 

참조하십시오했습니다. 도움을 주시면 감사하겠습니다. 호버 :

감사 S.

Answer 1

하향 UL 리 요소를 강요하여 리튬의

ul li { 
    display: inline-block; 
    width: 35px; 
    height:150px; 
    line-height:35px; 
    font-size: 12px; 
    font-weight: bold; 
    font-family: arial; 
    cursor: pointer; 
    position: relative; 
    vertical-align: top; 
} 

jsFiddle