基金會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; 
}