基础6.4.1 - 如何在其父级下设置下拉菜单中心？

Question

我正在尝试使用此site这样的下拉菜单，我可以将下拉菜单集中在一起：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，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;
}