嵌套的 li 元素与父 li 重叠答案

【问题标题】：Nested li element overlaps parent li嵌套的 li 元素与父 li 重叠
【发布时间】：2016-06-27 11:15:24
【问题描述】：

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

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

我的 CSS 如下所示：

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

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

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

提前致谢！

【问题讨论】：

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

标签： angularjs html css angular-ng-if

【解决方案1】：

function submenuappear() {
  document.getElementById("sub-menu-item").style.marginLeft =  "0";
  document.getElementById("menu-item2").style.marginTop =  "0";
  }

function submenudisappear() {
  document.getElementById("sub-menu-item").style.marginLeft =  "-300px";
  document.getElementById("menu-item2").style.marginTop =  "-20px";
  }

function submenudisappear() {
  document.getElementById("sub-menu-item").style.marginLeft =  "-300px";
  document.getElementById("menu-item2").style.marginTop =  "-20px";
  }

#sub-menu-item {
    margin-left: -300px;
}

#menu-item2 {
  margin-top: -20px;
  }

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
   <div class="menu">
    <ul class="no-list-style">
        <li onclick="submenuappear()"class="menu-item" ng-click="selectedAction = 1">Menu Item 1
            <ul class="no-list-style" ng-if="selectedAction == 1">
                <li id="sub-menu-item">Sub-menu item 1</li>
            </ul>
        </li>
        <li onclick="submenudisappear()" id="menu-item2">Menu item 2</li>
        <li onclick="submenudisappear()"id="menu-item3">Menu item 3</li>
    </ul>
    </div>
</body>
</html>

我做了一个sn-p。当您单击第一个菜单项时，子菜单项将在导航栏中可见。然后，当您单击菜单项 2 或 3 时，子菜单项将再次消失。希望这是您正在寻找的。

【讨论】：

你为什么要把onclick放到一个有角度的应用程序中？
你是什么意思，为什么不呢？ @charlietfl
哦，好吧，我以为这只是普通的javascript