使用css将水平子菜单居中于父菜单下方

最好用小提琴演奏：

如何使子菜单位于父菜单项下方的中心？我发现很多居中技巧都不适用，因为子元素比父元素宽

这是纯CSS实现的还是必须使用javascript实现的？

---

如果需要JS，是否有人手头有JQuery代码可以执行此操作？

可能需要为

子菜单定义默认的
宽度
，如下所示：

.sub-menu {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    white-space: nowrap;
    text-align:center;
    left:50%;
    margin-left:-150px;
    width:300px;
}
.active .sub-menu {
    display:block;
}

选中此项
这将使子菜单居中：

ul>ul.子菜单{
位置：绝对位置；
左：50%；
转换：translateX（-50%）
}
投反对票的人请解释我错在哪里不知道是谁投了反对票，但这正是我要求的。如果子菜单上有背景，它就不起作用了，因为它比内容更宽，但在我的情况下，它起作用了。（虽然现在我已经实现了它，但子项的数量看起来不太合适，但这不是问题所在：p）