html - 子菜单定位不在父元素下

子菜单未显示在父项下，而是显示在左侧。试图使绝对值断断续续，但似乎没有任何效果。

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

最佳答案

这是用代码更新的小提琴。

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

关于html - 子菜单定位不在父元素下，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21643539/