引导“ mega-dropdown”居中主菜单导航项

Question

我正在尝试构建一个主菜单导航，并在其下方提供全屏屏幕下拉菜单。 我找到了一个很棒的示例，但是似乎无法弄清楚主菜单项本身如何居中。

这是我到目前为止所拥有的，请参见此处的示例： http : //codepen.io/ajmajma/pen/ALJbdk 。

这可以完美地工作，但是我需要将那些主菜单项（家庭，左右等）居中。

我最初的想法是inline-block它们，但是这会导致子菜单出现一些棘手的行为。

如果我添加

.desktop-nav {
  text-align: center
}

.menu {
  display: inline-block
}

我得到了所需的居中效果，但是子菜单受限于ul的较小中心尺寸，因此我需要它保持页面的整个宽度。 在此处查看行为-http: //codepen.io/ajmajma/pen/wzYPQm 。

关于如何解决此问题以获得预期效果的任何想法吗？ 谢谢！

Answer 1

您可以在ul上添加text-align:center ，在li上添加display:inline-block 。 只需从li除去float: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;
}

http://codepen.io/Founded1898/pen/amREJm

Answer 2

我找到了解决方案：

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

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

如果您不想在桌面上设置页margin ，则必须创建.iWantThisMenuToCenter {margin-left: 50%}并将其分配给<nav>标签。