How to center absolute dynamic width ul submenu?

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><a href="#">Menu</a></li>
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="#">aa aa aa aa</a></li>
                <li><a href="#">bb bb</a></li>
            </ul>
        </li>
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="#">cc cc cc</a></li>
                <li><a href="#">dd dd dd dd dd</a></li>
                <li><a href="#">ee ee ee</a></li>
            </ul>
        </li>
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="#">ff ff</a></li>
                <li><a href="#">gg gg</a></li>
            </ul>
        </li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
    </ul>
</nav>