Javascript “引导”；“超级下拉列表”；对中主菜单导航项

我正在尝试建立一个主菜单导航，它下面有一个全宽的屏幕下拉菜单。我发现了一个很棒的例子，但我似乎不知道主菜单项本身是如何居中的

这是我到目前为止所做的，请参见这里的示例：

这是完美的作品，但我需要那些主菜单项（主页，关于，等等…）的中心

我的第一个想法是

内联块

它们，但是这会导致子菜单出现一些不正常的行为

如果我加上

.desktop-nav {
  text-align: center
}

.menu {
  display: inline-block
}

我得到了期望的居中效果，但是子菜单被限制在

ul

的小中心大小，我需要它保持页面的全宽。请看这里的行为-

---

你知道如何解决这个问题以达到预期效果吗？谢谢

您可以将

文本对齐：居中

添加到ul，并将

显示：内联块

添加到li。只需从li中删除

浮动：left

，就可以了

.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  text-align:center;
}

.menu > ul > li {
  display: inline-block;
  padding: 5px;
  margin: 0;
}

---

您可以向ul添加

文本对齐：居中

，并向li添加

显示：内联块

。只需从li中删除

浮动：left

，就可以了

.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  text-align:center;
}

.menu > ul > li {
  display: inline-block;
  padding: 5px;
  margin: 0;
}

---

我找到了解决这个问题的方法：

.desktop-nav {
  margin-left: 50%;
}

.menu > ul > li > ul {
  margin-left: -50%;
}

---

如果你不想在桌面上设置

边距

，你必须创建一个类似

.iwantThismenAutoCenter{margin left:50%}

，并将其分配给

标记。

我找到了解决方案：

.desktop-nav {
  margin-left: 50%;
}

.menu > ul > li > ul {
  margin-left: -50%;
}

如果你不想在桌面上设置

边距

，你必须创建一个类似

.iwantThismenAutoCenter{margin left:50%}

的东西，并将其分配给

标记