ネストされた要素が親要素と重なっています

-2

ネストされた要素がメニューとして表示されています。アイテムをクリックすると、リストが展開され、内側のリストが表示されます。しかし、内側の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のようになります。私は、サブメニュー項目1およびメニュー項目2の重なりで、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; 
}

。

サブメニュー項目を垂直メニューに挿入し、メニュー項目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

ネストされた要素が親要素と重なっています

答えて

関連する問題