Die Breite der geschachtelten ul volle Breite machen

Question

Ich versuche, ein reaktionsfähiges Menü zu machen, das volle Breite im Sub-Untermenü annimmt, aber mein Problem ist, dass es auf die Eltern li beschränkt ist, die 33,3% ist, will ich mein Untermenü des Untermenüs soll ebenfalls 100% breit sein. Hier ist meine codepen und mein Code wie folgt

<div class="mobile-menu hidden-lg-up active"> 
    <ul id="menu-mobile-menu" class="links-middle-group"> 
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31"><a href="#">About</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-70"><a href="#">Section 1</a> 
      <ul class="sub-menu"> 
      <li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-72"><a href="#">Sub section 1</a></li> 
      <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="#">Sub section 2</a></li> 
      <li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="#">Sub section 3</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="#">Section 2</a></li> 
     <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="#">Section 3</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35"><a href="#">Portfolio</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="#">Portfolio 1</a></li> 
     <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="#/">Portfolio 2</a></li> 
     <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="#">Portfolio 3</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-37"><a href="#">Contact</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#/">facebook</a></li> 
     <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Twitter</a></li> 
     <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="#">Email me</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Die Menütitel von Unterabschnitt 1, 2 und 3 haben eine eigene Spalte ist, so zu beschränken Höhe kann nicht funktionieren. Jeder Abschnitt, auf den geklickt wird, zeigt seinen eigenen Abschnitt an (nicht in Demo vorgestartet). Ich habe auch versucht, Position, aber das macht den zweiten Link portfolio springt auf und ruiniert das Layout.Vielleicht mache ich es falsch?

Answer 1

Da Ihre Listenelemente 33% der vollen Breite haben, kann die geschachtelte Liste höchstens die Breite des übergeordneten Elements einnehmen. Da es 100% von 33% ist, könntest du die Breite deiner verschachtelten .sub-menu auf 300% setzen.

Ich würde auch empfehlen, einen anderen Klassennamen für das Targeting verschachtelter Untermenüs zu erstellen, da dieser Selektor ein bisschen komisch aussieht.

Hinweis: Dies ist nicht das Beste für die Wartbarkeit, da Sie es immer aktualisieren müssen, wenn Sie Listenelemente hinzufügen oder entfernen, und es beruht auf der Annahme, wie viele Listenelemente vorhanden sind. Die Positionierung des verschachtelten Untermenüs in einem relativ positionierten .menu-item würde am besten funktionieren, aber dann müssten Sie die Höhe der Listenelemente kennen. Obwohl das viel einfacher zu verwalten ist als die Breite.