Expand absolute div to relative child auto width - html

Question

So, I've got a sub menu ul item, which I need to expand to the auto width of the widest child li, without specifying actual width. As of right now, child ul is taking the width of .mainlink and text inside li items starts collapsing. I need it to be in one line and go beyond .mainlink width if necessary.
I've tried all the possible displays, but can't get it to work.
.mainnav {
display: table;
table-layout: fixed;
}
ul.mainnav li {
display: table-cell;
}
.subnav {
position: absolute;
top: 40px;
}
.menuitem {
position: relative;
display: block;
}
<ul class="mainnav">
<li class="mainlink">Link 11
</li>
<li class="mainlink">
Link 12
<ul class="subnav">
<li class="menuitem">link 1
</li>
<li class="menuitem">link 2
</li>
</ul>
</li>
</ul>

Answer 1

reset padding on .subnav because ul has padding by default
UPDATE (based on OP updated question)
use display:inline-block in .mainnav > li
.mainnav {
background:lightyellow;
position:relative
}
ul.mainnav > li {
display: inline-block;
background:lightblue;
}
.subnav {
position: absolute;
top: 40px;
padding: 0;
border: 5px solid green
}
.menuitem {
position: relative;
display: block;
background: red
}
<ul class="mainnav">
<li class="mainlink">Link 11</li>
<li class="mainlink">
Link 12
<ul class="subnav">
<li class="menuitem">link 1
</li>
<li class="menuitem">link 2 long text
</li>
</ul>
</li>
</ul>