Question

我有一个嵌套的列表元素作为菜单。当我点击某个项目时，我想要展开列表并显示内部列表。但内部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 class子菜单项使用position absolute，则子菜单项1和菜单项2中的两个文本重叠。

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

提前致谢！

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

我做了一个片段。单击第一个菜单项时，子菜单项将显示在导航栏中。然后，当您单击菜单项2或3时，子菜单将再次消失。希望这是你正在寻找的。

嵌套的li元素与父li重叠

1 个答案: