子菜单定位不在父项下

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