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

【问题标题】：Centered Menu Dropdowns in Purecss FrameworkPurecss 框架中的居中菜单下拉菜单
【发布时间】：2019-01-20 09:58:28
【问题描述】：

这是我从Purecss documentation 复制的当前菜单，其中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 类的位置，而不是子菜单项的text-align。我已经尝试过了，但没有运气：

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

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

【问题讨论】：

什么是没有任何 cmets 的 2 票？我认为这个问题可能对那些使用 Purecss 的人也有帮助。此外，我已经检查了 Stack Overflow 的答案，但没有运气。

标签： css drop-down-menu menu submenu pure-css

【解决方案1】：

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

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

你可以在here看到它。

【讨论】：