如何让下拉子菜单Sub-Menu-1与父菜单标题居中对齐？

问题背景 #

我在构建下拉菜单时，遇到了子菜单（Sub-Menu-1）无法和主菜单标题居中对齐的问题。尝试过调整display属性、定位方式等多种设置，只有给.ul-sub-menu-1添加margin-left:-50px能实现对齐，但这种硬编码偏移的方式不够灵活，担心后续布局变动时出现适配问题，想找更优的解决方案。

优化解决方案 #

核心问题在于你给子菜单用了position:fixed（相对于视口定位），无法跟随父菜单的位置。正确的做法是利用绝对定位+变换居中，适配性更强，步骤如下：

• 保留父元素.li-main-menu-item-with-submenu的position:relative（已存在），作为子菜单的定位参考
• 将子菜单容器.sub-menu-1设置为position:absolute，脱离文档流但相对于父元素定位
• 给.ul-sub-menu-1添加left:50%和transform:translateX(-50%)，自动计算水平偏移量实现居中
• 移除硬编码的margin-left:-50px
• 修正hover时显示子菜单的CSS，去掉多余的下划线样式（原代码错误地给子菜单添加了下划线）

修改后的完整CSS代码 #

:root {
    --clr-primary-400: #f44336;
    --clr-accent-100: #ffffff;
    --clr-accent-900: #000000;
    --font-family-primary: "helvetica";
    --font-family-secondary: "Amatic SC", sans-serif;
}

/* Remove Some Defaults */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "helvetica";
}

/* Set Core Root Defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set Core Body Defaults */
body {
    text-rendering: optimizeSpeed;
}

/* Make Images Easier to Work With */
img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/* Header/Nav Section */
.container[data-type="headercontainer"] {
    height: 100vh;
    max-width: 1140px;
    background-image: linear-gradient(rgba(0,0,0,0.25),#999393),url(images/hero-photo/a-world-at-war-cover-d-1040-l85.webp);
    background-size: cover;
    background-position: center;
    margin: auto;
    position: relative;
    container-type: inline-size;
}
nav {
    display: flex;
    padding: 1% 1%;
    justify-content: space-around;
    align-items: center;
}
/* Logo */
nav .logo {
    width: 175px;
}

.nav-menu-links {
    flex: 1;
    background-color: pink;
}

nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
}
nav ul li {
    display: inline-block;
    padding:5px 8px 5px 8px;
    position: relative;
    list-style: none;
}

nav a {
    height: 100%;
    display: flex;
    color: #fff;
    font-family: "Amatic SC", sans-serif;
}
nav .a-main-menu-item, .a-main-menu-item-with-submenu {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

/* Main Menu Item Hover Effects */
nav ul .li-main-menu-item::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}
nav ul .li-main-menu-item:hover::after {
    width: 100%;
}

/* Main Menu Item With Submenu Hover Effects */
nav ul .li-main-menu-item-with-submenu::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}
nav ul .li-main-menu-item-with-submenu:hover::after {
    width: 100%;
}

/* Hide Sub-Menu-1 being displayed until Hovered on */
.sub-menu-1 {
    display: none;
    position: absolute; /* 添加绝对定位 */
    top: 100%; /* 子菜单位于父菜单下方 */
    left: 0;
}

/* SUB MENU 1 CONFIG */
.ul-sub-menu-1 {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: fit-content;
    justify-content: flex-start;
    white-space: nowrap;
    background-color: deepskyblue;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
}

.li-sub-menu-1-item {
    padding:5px 8px 5px 8px;
    position: relative;
    list-style: none;
    width: fit-content;
    white-space: nowrap;
}

.a-sub-menu-1-item {
    font-size: 16px;
    font-style: normal;
    color: #fff;
}

/* 修正hover显示子菜单的样式 */
nav ul .li-main-menu-item-with-submenu:hover .sub-menu-1 {
    display: block;
}

说明 #

• position:absolute确保子菜单相对于父菜单定位，不会脱离父菜单的位置范围
• left:50% + transform:translateX(-50%)是自适应的水平居中方案，无论父菜单或子菜单宽度变化，都能保持居中对齐
• top:100%让子菜单刚好在父菜单下方，避免重叠

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