Question

我正在尝试创建一个响应式菜单，它在子菜单中占据全宽，但我的问题是它仅限于33.3％的父li，我希望子菜单的子菜单为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的菜单标题将有自己的列，因此限制高度不起作用。点击后每个部分都会显示它自己的部分（在演示中没有显示）我也尝试了位置，但这会使第二个链接portfolio跳起并破坏布局。也许我做错了？

Answer 1

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

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

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

注意：这不是最好的可维护性，因为每当您添加或删除列表项时都需要更新它，并且它依赖于多少列表的假设物品在那里。将嵌套子菜单绝对定位在相对定位的.menu-item内最好，但是您需要知道列表项的高度。虽然这比宽度更容易维护。

使嵌套的ul宽度全宽

1 个答案: