在下拉菜单中居中 ul 或 li

Question

我只使用 html 和 css 构建了一个下拉菜单。我想在单击下拉菜单时将下拉菜单内容居中。

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

有什么建议吗？

我试过更改 <ul> display: table，然后 <li> float: left，更改边距（0 auto）和负边距，但似乎对我没有任何作用。

感谢您的指导。

Answer 1

由于您的 ul 是绝对定位的，因此将其向右移动 50%，然后将其转换回左 50%：

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