I've been experimenting with different methods to display a sub-list inline within an absolute container without any luck. I even tried using divs instead of the list, but that didn't work either. The only successful approach so far has been using tables, but I'm not too keen on that solution. Any suggestions?
ul.main > li {
display: inline-block;
position: relative;
background: red;
}
.sub{
position: absolute;
left: 0;
background: green;
}
ul..sub li {
display: inline-block;
}<ul class="main">
<li>
1
<ul class="sub">
<li>1.1.</li>
<li>1.1.</li>
<li>1.1.</li>
</ul>
</li>
<li>2</li>
</ul>