드롭 다운 메뉴를 수직으로 변환

나는 CSS 파일로 메뉴를 드롭 다운하고 그것을 Verctical 메뉴로 변환하고 싶다. 그러나 많이 시도했지만 아무도 도와주지 말라. Folowing은 내 CSS와 HTML 코드이다. 제발 나에게 말해줘. 정확히 어떤에 메뉴가드롭 다운 메뉴를 수직으로 변환

#sddmT 
{ margin: 0; 
    padding: 0; 
    z-index: 30} 

#sddmT li 
{ margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    font: bold 11px arial} 

#sddmT li a 
{ display: block; 
    margin: 0 1px 0 0; 
    padding: 4px 10px; 
    width: 60px; 
    background: #4A617B; 
    color: White; 
    text-align: center; 
    text-decoration: none} 

#sddmT li a:hover 
{ background: #BDCFD6; 
    color:#4A617B 

    } 

#sddmT div 
{ position: absolute; 
    visibility: hidden; 
    margin: 0; 
    padding: 0; 
    background: #4A617B; 
    border: 1px solid #BDCFD6} 

    #sddmT div a 
    { position: relative; 
     display: block; 
     margin: 0; 
     padding: 5px 10px; 
     width: auto; 
     white-space: nowrap; 
     text-align: left; 
     text-decoration: none; 
     background: #4A617B; 
     color: #BDCFD6; 
     font: 11px arial} 

    #sddmT div a:hover 
    { background: #BDCFD6; 
     color: #4A617B}

변환하지 않습니다 때문에 내가 놓친 거지 그리고 그녀가 여기에 HTML 코드

<ul id="sddm"> 
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">ETP</a> 
     <div id="m1" onmouseover="mcancelclosetime()" onclick="mclosetime()"> 
     <a href="http://dashboard.shakarganj.com.pk/ca/sml1etp.php" target=_blank>ETP - Jhang</a> 
     <a href="http://dashboard.shakarganj.com.pk/ca/sml2etp.php" target=_blank>ETP - Bhone</a> 
     </div> 
     </li> 
    </ul>

입니다 그리고 것은 클 내 JS 코드 및 메뉴 항목을 열

,993,247,143,132 10

업데이트 나는이 시도이 enter image description here