子菜单定位不在父项下

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