将绝对元素的宽度定位为它的容器（在css中）

Question

所以有以下布局：

我们专注于'SERVICEUSER'按钮及其子菜单问题。

那么有没有办法让子菜单的最小宽度（位置绝对）与其父级相同。

我已经重新创建了这个情况 jsfiddle link

所以基本上需要的是使.collection min-width与li的宽度相同。

这种情况的html结构是这样的：

<ul>
  <li>
    <a href="">SERVICEUSER</a>
    <div class="collection">
      <div class="item">Item-1</div>
      <div class="item">Item-2</div>
      <div class="item">Item-3</div>
    </div>
  </li>
</ul>

这种情况的css是这样的：

ul { list-style-type: none; }

li { display: inline; }

a { background: green; }

.collection {
  position: absolute; // this is necessary for the situation
  background: white;
}

Answer 1

以＆＃34;绝对＆＃34;定位的元素包含在其最近的相对父级的流中。如果您使li相对，则可以设置集合的宽度。

li { display: inline; position: relative; }

.collection {
  position: absolute;
  background: white;
  min-width: 100%;
  white-space: nowrap;
}

编辑：我添加了white-space: nowrap以允许集合（子项）比主项更大。