Css 使嵌套ul的宽度为全宽

我正在尝试制作一个响应菜单，它在子菜单的子菜单中具有全宽，但我的问题是它仅限于父li（33.3%），我希望子菜单的子菜单也具有100%的宽度。这是我的 我的代码如下

<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>

---

第1、2和3小节的菜单标题将有自己的列，因此限制高度无法工作。单击每个部分时，都会显示其自己的部分未演示在演示中启动我也尝试了位置，但这会使第二个链接组合跳起来并破坏布局。可能是我做错了吗？

由于您的列表项占全部宽度的33%，嵌套列表最多可以占据其父列表的宽度。由于它是33%的100%，您可以将嵌套子菜单的宽度设置为300%

.sub-menu .sub-menu {
    width: 300%;
}

我还建议为嵌套子菜单创建另一个类名，因为这个选择器看起来有点滑稽

---

注意：对于可维护性来说，这不是最好的，因为无论何时添加或删除列表项，都需要对其进行更新，并且这取决于对列表项数量的假设。绝对地将嵌套的子菜单定位在相对定位的菜单项中。菜单项最有效，但您需要知道列表项的高度。尽管这比宽度更容易保持。

我尝试了你喜欢的300%的方式，但它不再有响应。我应该申请ul还是li？