在下拉菜单中居中ul或li

Question

我只使用html和css构建了一个下拉菜单。我想将下拉内容集中到下拉菜单中，点击它。

在我的代码中，这将使紫色部分相对于浅蓝色部分居中。我的代码 - https://jsfiddle.net/92uhs075/

有关这样做的任何建议吗？

我尝试更改<ul> display: table然后更改<li> float: left，有时更改边距（0自动）和负数，但似乎没有任何内容适合我。

感谢您的指导。

Answer 1

由于您的ul绝对定位，请将其向右移动50％，然后将其向左转换50％：

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