How to center absolute dynamic width ul submenu? - css

Question

I found a lot of posts about centering submenu <ul> absolute positioned, but none of them solved the problem of center the submenu that have dynamic width determined by the text length of the <li> children...
Most of those posts offer a solution based on the use of negative margin-left,
and this means that it can work only for a specific width, but not for dynamic width!
So I have prepared a quick FIDDLE HERE with a very basic menu,
please can you help me to figure out how is possible to automatically center submenus?
nav {
background-color: red;
}
ul {
background-color: rgb(88, 164, 228);
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: inline-block;
margin: 0 20px;
}
ul ul {
background: rgb(119, 193, 255);
position: absolute;
outline: 1px solid black;
}
ul ul li {
margin: 0;
display: block;
}
<nav>
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>aa aa aa aa</li>
<li>bb bb</li>
</ul>
</li>
<li>Menu
<ul>
<li>cc cc cc</li>
<li>dd dd dd dd dd</li>
<li>ee ee ee</li>
</ul>
</li>
<li>Menu
<ul>
<li>ff ff</li>
<li>gg gg</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>