如何居中绝对动态宽度ul子菜单？

Question

我发现很多关于居中子菜单<ul>绝对定位的帖子，但没有一个解决了子菜单居中的问题，其动态宽度由{{1}的文本长度决定孩子......

这些帖子中的大部分提供了基于使用否定<li>的解决方案 这意味着它只能用于特定宽度，但不能用于动态宽度！

所以我准备了一个快速的 FIDDLE HERE ，带有一个非常基本的菜单，
请问你能帮我弄清楚如何自动居中子菜单吗？

margin-left

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;
}

Answer 1

您可以使用transform。

ul ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

额外设置如下。

ul li {
    position: relative;
}

ul ul li {
    white-space: nowrap;
}

<强> Updated JsFiddle

＆＃13;

＆＃13;

nav {
    background-color: red;
}
ul {
    background-color: rgb(88, 164, 228);
    padding: 0;
    margin: 0;
    list-style-type: none;
}
ul li {
    display: inline-block;
    margin: 0 20px;
    position: relative;
}
ul ul {
    background: rgb(119, 193, 255);
    position: absolute;
    outline: 1px solid black;
    left: 50%;
    transform: translateX(-50%);
}
ul ul li {
    margin: 0;
    display: block;
    white-space: nowrap;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;