基金会6.4.1 - 如何使其下级的下拉菜单中心？

Question

我想实现这样的site，在那里我可以centerise一个下拉菜单，下拉菜单：

这是我工作的代码，这是远远不够完善尚：

.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插件，我可以使用，而不是实现这一结果，重新发明它，或者使用基金会（这是相当定制它的挑战！）

Answer 1

当前后添加此样式规则此之后将摆脱箭头（你可以，如果你不能在样式块正确的规则声明之后得到它的使用很重要，但我建议反对）

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

而且该网站使用元素上动态计算的左值将其置于中心位置，您可以通过类似这样的方式实现您想要的效果

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