Purecss框架下拉子菜单相对父菜单居中实现求助

我明白你的需求：让下拉子菜单相对于父菜单项（比如示例里的Contact）居中显示，而且不管父菜单文本多长都能适配。你之前尝试的left: -50%没起作用，是因为这个方法没有考虑子菜单自身的宽度，下面给你一个可行的方案：

核心解决方案 #

通过CSS的绝对定位结合transform来实现自适应居中，这个方法能完美适配任意长度的父菜单项：

/* 针对水平菜单的下拉子菜单 */
.pure-menu-horizontal .pure-menu-has-children .pure-menu-children {
  left: 50%; /* 先把菜单的左边缘定位到父元素的中点 */
  transform: translateX(-50%); /* 再把菜单向左偏移自身宽度的50%，实现整体居中 */
}

为什么这个方案有效？ #

• PureCSS默认给pure-menu-has-children（包含下拉的父菜单项）设置了position: relative，所以子菜单的绝对定位是相对于父项的。
• left: 50%会把子菜单的左边界对齐到父元素的水平中点，然后transform: translateX(-50%)会把子菜单整体向左移动自身宽度的一半，这样子菜单的中点就和父元素的中点完全重合，实现了居中效果。
• 这个方法不需要知道父元素或子菜单的具体宽度，完全自适应，不管父菜单项是短文本还是长文本都能正常工作。

额外优化提示 #

如果你的子菜单宽度特别大，担心超出视口，可以添加以下样式优化显示：

.pure-menu-horizontal .pure-menu-has-children .pure-menu-children {
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw; /* 限制最大宽度为视口的90% */
  overflow-x: auto; /* 超出时显示横向滚动条 */
}

你可以把这段CSS添加到你的样式表中，替换之前无效的代码，就能看到下拉子菜单相对于父项居中的效果了。

内容的提问来源于stack exchange，提问作者Ehsan