css - 使嵌套ul的宽度为全宽

Question

我正在尝试制作一个响应式菜单，它在子菜单的子菜单中占满宽度，但我的问题是它仅限于父 li，即 33.3%，我希望子菜单的子菜单为 100 % 宽度也是如此。这是我的 codepen和我的代码如下

<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 的菜单标题将有自己的列，因此不能限制高度。单击时每个部分都会显示它自己的部分(在演示中未演示)我也尝试了 position 但这使得第二个链接 portfolio 跳起来并破坏了布局。也许我做错了吗？

Answer 1

由于您的列表项占整个宽度的 33%，因此嵌套列表最多可以占据其父项的宽度。由于它是 33% 的 100%，您可以将嵌套 .sub-menu 的宽度设置为 300%。

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

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

注意:这不是可维护性的最佳选择，因为您需要在添加或删除列表项时更新它，并且它依赖于对列表项数量的假设。将嵌套子菜单绝对定位在相对定位的 .menu-item 中效果最好，但您需要知道列表项的高度。虽然这比宽度更容易维护。