Foundation 6.4.1 - 如何使下拉菜单在其父项下居中？

Question

我正在尝试实现这样的下拉菜单site, where I can centerise the dropdown menu :

这是我的工作代码，它远非完美：

.row,
.grid-container {
  border: 1px solid blue;
}

.menu>li>a {
  line-height: 40px;
}

.menu>li>a:hover {
  border-bottom: 1px solid red;
}

.menu ul li a {
  line-height: normal;
  width: 100%;
  text-align: center;
}

.menu ul li:hover {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>

<div class="row">
  <ul class="menu align-center dropdown" data-dropdown-menu>
    <li>
      <a href="#">One</a>
      <ul class="menu vertical">
        <li><a href="#">One One One One One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<script>
  $(document).foundation();
</script>

如您所见，menu vertical 未居中 - 只有文本居中。我怎样才能使它居中 在它的父 之下？

此外，我怎样才能删除 one 旁边的下拉箭头？

或者我可以使用任何可定制的 CSS 插件来实现这个结果，而不是重新发明它，或者使用 Foundation（定制它是一个很大的挑战！）

Answer 1

在当前样式规则之后添加这个之后会去掉箭头（如果在样式块中正确的规则声明之后你不能得到它，你可以使用一个重要的，但我建议不要这样做）

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{
  content: none;
}

并且该站点使用元素上动态计算的左值将其居中放置，您可以通过这样的方式达到您想要的效果

.dropdown.menu > li.opens-right > .is-dropdown-submenu{
   margin-left: -65px;
}

Foundation 6.4.1 - 如何使下拉菜单在其父项下居中？

Foundation 6.4.1 - How to make the dropdown menu centre under its parent?

html

css

zurb-foundation

drop-down-menu