导航栏下拉交互中二级列表项无法居中对齐父列表项正下方

现有代码的问题 #

二级下拉列表已设置绝对定位，父级导航项也配置了相对定位作为定位参考，但缺少水平方向的定位偏移规则，同时没有清除无序列表的默认边距/内边距，导致下拉层无法对准父项的中心位置。

补全后的样式规则 #

在原有CSS基础上，新增/修改二级下拉层的样式即可实现精准居中：

.container ul ul{
    position: absolute;
    /* 让下拉层刚好落在父导航项的下边缘 */
    top: 100%;
    /* 将定位起点移到父元素的水平中线位置 */
    left: 50%;
    /* 把自身向左偏移自身宽度的50%，实现严格水平居中 */
    transform: translateX(-50%);
    /* 清除浏览器默认的列表样式，避免视觉偏移 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 可选：给下拉层加固定背景，避免穿透显示底层导航内容 */
    background: #ffffff;
    min-width: 100%;
    /* 可选：配合悬停交互做平滑显隐 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* 悬停父导航项时显示对应下拉层 */
.container > ul li:hover > ul {
    opacity: 1;
    pointer-events: auto;
}

注意事项 #

• 该方案不需要提前预设下拉层的固定宽度，无论二级列表的内容长度如何调整，都能始终保持在父导航项的正下方
• 必须清除ul的默认内边距：浏览器默认给无序列表设置了左缩进，不清除的话下拉层会整体向右偏移，视觉上看起来不居中
• 居中逻辑和下拉的显隐逻辑完全解耦，不会影响你已经实现的悬停弹出效果

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