Question

这是我当前从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%;
}

希望很清楚，在此先感谢您的帮助。

Answer 1

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

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

您可以在操作here中看到它。

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

1 个答案: