像容器一样放置绝对元素的宽度（在CSS中）

Question

So there is the following layout:

We are focusing at the 'SERVICEUSER' button and its submenu problem.

So is there a way to make the minimum width of the submenu (with position absolute) the same as its parent.

I have recreated the situation on this jsfiddle link .

So basicly what is needed is to make the .collection min-width same as the width of the li .

The html structure of this situation is like this:

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

The css of this situation is like this:

ul { list-style-type: none; }

li { display: inline; }

a { background: green; }

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

Answer 1

An element positioned with "absolute" is contained in the flow of its closest relative parent. If you make li relative, you can set the width for collection.

li { display: inline; position: relative; }

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

Edit: I added white-space: nowrap to allow the collection (subitems) to be larger than the main item.