Question

我正在尝试创建一个菜单，其中有一个子菜单。经过大量研究，我得出了以下结果：

<div id="test">
  <ul id="menu">
    <li class="single">
      <a href="#">test</a>
    </li>
    <li class="dropdown">
      <a href="#">dropdown</a>
      <ul class="submenu">
        <li class="dropdown">
          <a href="#">a</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">aa</a>
            </li>
            <li class="single">
              <a href="#">aa</a>
            </li>
            <li class="single">
              <a href="#">aa</a>
            </li>
            <li class="single">
              <a href="#">aa</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">b</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">bb</a>
            </li>
            <li class="single">
              <a href="#">bb</a>
            </li>
            <li class="single">
              <a href="#">bb</a>
            </li>
            <li class="single">
              <a href="#">bb</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">c</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">cc</a>
            </li>
            <li class="single">
              <a href="#">cc</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">d</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>
</div>

#test {
  z-index: 9999;
  position: relative;

  ul#menu {
    display: flex;

    li {
      padding: .5rem;
      min-width: 6rem;
      width: auto;

      ul.submenu {
        display: none;
        background: black;
        flex-direction: column;
        position: absolute;
        min-height: 100%;

        a {
          color: white;
          display: flex;
          width: 100%;
          height: 100%;
        }

        &:hover {
          display: flex;
        }

        ul.submenu {
          height: 100%;
          position: absolute;
          left: 100%;
          top: 0;
          min-height: 100%;
          max-height: 100%;
          background: green;
          flex-wrap: wrap;

        }
      }

      &:hover {
        >ul.submenu {
          display: flex;
        }
      }
    }
  }
}

但是我遇到一个令人讨厌的问题，在那儿我找不到任何合适的文档（可能是我的Google技术很烂）。当您看到“ dd”子菜单时，它的确像我一样包裹了，但是绿色背景并未出现在LI项的后面。换句话说，当物品包裹起来时，“ ul.submenu”容器的宽度不会在我希望其增长的地方增长。

我尝试在li上设置其他显示模式，但这没用。子菜单上的最小值也不为100％。所以有点卡住了。

任何人都有解决方案（可能是这样的答案，我把头砸在键盘上说“ duh”），我将非常感谢您的时间和精力！

Flexbox包装不会增加父级的宽度吗？

0 个答案: