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

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