Angularjs 嵌套的li元素与父li重叠

我有一个嵌套的列表元素作为菜单。当我单击一个项目时，我希望列表展开，内部列表显示出来。但内部li项（子菜单项1）与父li（菜单项2）重叠

如果我不对css类子菜单项使用绝对位置，子菜单项1和菜单项2中的文本都会重叠

我希望子菜单项插入垂直菜单，向下移动菜单项2

提前谢谢

函数子菜单表（）{
document.getElementById（“子菜单项”）.style.marginLeft=“0”；
document.getElementById（“菜单项2”）.style.marginTop=“0”；
}
函数子菜单（）{
document.getElementById（“子菜单项”）.style.marginLeft=“-300px”；
document.getElementById（“菜单项2”）.style.marginTop=“-20px”；
}
函数子菜单（）{
document.getElementById（“子菜单项”）.style.marginLeft=“-300px”；
document.getElementById（“菜单项2”）.style.marginTop=“-20px”；
}

#子菜单项{
左边距：-300px；
}
#菜单项2{
利润上限：-20px；
}

菜单项1

子菜单项1


菜单项2
菜单项3

请提供一个plunker。无法从您的描述中理解您预期的视觉行为。您为什么会将

onclick

放入角度应用程序？您的意思是什么，为什么不@charlietflOh好吧我以为这只是普通的javascript

<div class="menu">
    <ul class="no-list-style">
        <li class="menu-item" ng-click="selectedAction = 1">Menu Item 1
            <ul class="no-list-style" ng-if="selectedAction == 1">
                <li class="sub-menu-item">Sub-menu item 1</li>
            </ul>
        </li>
        <li class="menu-item">Menu item 2</li>
        <li class="menu-item">Menu item 3</li>
    </ul>
</div>

.no-list-style {
    padding: 0;
}
.menu-item {
    height: 30px;
    padding-left: 20px;
    margin: 0;
}
.sub-menu-item {
    height: 30px;
    display: inline-block;
    width: 100%;
    position: absolute;
}