Making the width of nested ul full width - css

Question

I am trying to making a responsive menu, that takes on full width in the sub's sub-menu but my problem is that it is restricted to the parent li which is 33.3%, I want my submenu of the submenu to be 100% width as well. Here is my codepen
and my code as follows
<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">About
<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">Section 1
<ul class="sub-menu">
<li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-72">Sub section 1</li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71">Sub section 2</li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73">Sub section 3</li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Section 2</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">Section 3</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">Portfolio
<ul class="sub-menu">
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">Portfolio 1</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">Portfolio 2</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">Portfolio 3</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">Contact
<ul class="sub-menu">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">facebook</li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65">Twitter</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">Email me</li>
</ul>
</li>
</ul>
</div>
The menu heading of sub section 1, 2 and 3 will have it's own column, so restricting to height cannot work. Each section when clicked on will display it's own section (not demostarted in demo) I also tried position but that makes the second link portfolio jumps up and ruin the layout.Maybe I am doing it wrong?

Answer 1

Since your list items are 33% of the full width, the nested list at most can take up the width of its parent. Since it's 100% of 33%, you could set the width of your nested .sub-menu's to 300%.
.sub-menu .sub-menu {
width: 300%;
}
I'd also recommend creating another class name for targeting nested sub-menu's because this selector looks a bit funny.
Note: This isn't the best for maintainability since you'd need to update it whenever you added or removed list items, and it relies on an assumption of how many list items are there. Absolutely positioning the nested sub-menu within a relatively-positioned .menu-item would work best but then you'd need to know the height of the list items. Although that's a lot easier to maintain than width.