CSS dropdown submenu with dynamic width: how to align left?
<p>It's easy to have a LI > UL submenu show up with CSS:</p>

<pre><code>.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover &gt; ul { display: block; position: absolute; background: #000; }
.menu li:hover &gt; ul li { display: block; background: #bbb; width: auto; }
</code></pre>

<p>In this case, the size of the submenu automatically adjusts to the width of the content. The submenu aligns left where the left of the parent LI element is.</p>

<p>Let's say I want to align the submenu to the right, so the right should lign up with the parent LI's right side. I can do that by having a fixed width of the submenu, and use this (assuming the parent LI is 100px wide):</p>

<pre><code>#menu-left li:hover &gt; ul { width: 150px; margin-left: -50px; }
</code></pre>

<p>But then you can't use flexible width submenu's anymore. Also, you need to know the width of the parent LI.</p>

<p>JS Fiddle explains my question best: <a href="https://jsfiddle.net/ybc0uxq8/1/" rel="nofollow">https://jsfiddle.net/ybc0uxq8/1/</a></p>

<p>Anyone knows a way to have the right side of the sub UL lign up with the right side of the parent LI without needing a fixed submenu width, and allowing for a submenu width larger than the parent LI?</p>