Вложенный элемент li перекрывает родительский элемент li

У меня есть вложенный элемент списка в качестве меню. Когда я нажимаю на элемент, я хочу, чтобы список расширился и появился внутренний список. Но внутренний элемент 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 вниз.

Заранее спасибо!

Источник

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, подменю снова исчезнет. Надеюсь, что это то, что вы ищете.

Источник
Другие вопросы по тегам