Purecss 框架中的居中菜单下拉菜单

Question

这是我从 Purecss documentation which works fine:

复制的当前菜单

<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
        <ul class="pure-menu-children">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
        </ul>
    </li>
</ul>

我现在正在尝试的是将下拉菜单/子菜单项置于父菜单下的中央（在本例中为 Contact）。我正在寻找一种无论父菜单长度如何都有效的解决方案。请注意，我指的是 pure-menu-children class 在父项下的位置，而不是子菜单项的 text-align 的位置。我已经试过了，但没有成功：

.pure-menu-horizontal ul.pure-menu-children {
  left: -50%;
}

希望已经清楚了，在此先感谢您的帮助。

Answer 1

检查 this example 后，我找到了实现我想要的方法。需要为子菜单设置宽度：

.pure-menu-horizontal ul.pure-menu-children {
  left: 50%;
  margin-left: -90px;
  width: 180px;
}

您可以看到它的实际效果 here。

Purecss 框架中的居中菜单下拉菜单

Centered Menu Dropdowns in Purecss Framework

css

menu

submenu

drop-down-menu

pure-css