Foundation 6.4.1-如何使下拉菜單位於其父菜單的中心？

Question

我正在嘗試實現一個類似於此站點的下拉菜單，在這里我可以將下拉菜單居中：

這是我的工作代碼，但還遠遠不夠完美：

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