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

Question

这是我从Purecss文档中复制的当前菜单，工作正常：

<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类在父级下的位置，而不是子菜单项text-align。我已经尝试过这个，但没有运气：

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

希望很清楚，并提前感谢您的帮助。

Answer 1

在检查此示例后，我找到了一种方法来实现我想要的。需要为子菜单设置宽度：

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

你可以在这里看到它的实际效果。