하위 메뉴가 상위 항목에 있지 않음

Question

하위 항목은 상위 항목 아래에 표시되는 반면 왼쪽에는 표시되지 않습니다. 절대를 꺼내려고했는데 아무 효과가없는 것처럼 보입니다. 여기

JS 바이올린 : http://jsfiddle.net/42qg5/

HTML

<div id="menu"> 
<div class="container"> 
    <ul> 
     <li><a href="#">Home</a> 
     </li> 
     <li><a href="#">About SRJC</a> 
     </li> 
     <li><a href="#">Admission</a> 
     </li> 
     <li><a href="#">The SR Programmes</a> 
     </li> 
     <li><a href="#">CCAs</a> 
     </li> 
     <li><a href="#">Portals</a> 

      <ul class="submenu"> 
       <li><a href="#">ASPIRE</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Staff & Parents</a> 
     </li> 
    </ul> 
</div> 
</div> 

CSS 여기

#menu ul li ul li { 
    background: #1f2024; 
    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
} 

Answer 1

코드와 바이올린 업데이트됩니다.

Fiddle

#menu ul li ul { 
padding-left: 10px; 
padding-right: 10px; 
height: auto; 
width: 100px; 
background-color: #e13393; 
border-bottom: 2px solid #fcc402; 
display: none; 
z-index: 999; 
    position:absolute; 
    left:0; 
    top:30px; 
} 

#menu li { 
display: inline; 
color: #fff; 
    position:relative; 
}