Q:

Position absolute element's width like it's container (in css)

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

A:

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.

