So, here is the current layout:
https://i.sstatic.net/MW7ek.png
We're specifically looking at the issue with the 'SERVICEUSER' button and its submenu.
Is there a way to ensure that the minimum width of the submenu (with absolute positioning) matches that of its parent?
I've replicated the scenario in this JSFiddle link.
Essentially, we need the .collection element to have a minimum width equal to that of the li.
The HTML structure for this setup is as follows:
<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 code for this situation is as follows:
ul { list-style-type: none; }
li { display: inline; }
a { background: green; }
.collection {
position: absolute; // necessary for this setup
background: white;
}