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

-2

У меня есть вложенный элемент списка в качестве меню. Когда я нажимаю на элемент, я хочу, чтобы список расширялся, а внутренний список отображался. Но внутренний элемент li (элемент подменю 1) перекрывает родительский ли (пункт меню 2).Вложенные элементы li перекрывают родительский li

<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 вниз.

Заранее благодарен!

источник

2016-06-27 Ramya

Просьба предоставить плункер. – Ravimallya

Невозможно понять, каково ваше ожидаемое визуальное поведение от вашего описания – charlietfl

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

источник

2016-06-27 11:29:46

Почему вы когда-либо ставили 'onclick' в угловое приложение? – charlietfl

Что вы имеете в виду и почему нет? @charlietfl –

Потому что это не так, как работать в угловых – charlietfl

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

ответ

Смежные вопросы