如何居中下拉菜单并缩小子菜单与父菜单的间距？

核心修改点 #

• 给父级菜单项<li>添加position: relative，确保子菜单以父菜单项为定位基准
• 子菜单通过left: 50% + transform: translateX(-50%)实现水平居中对齐父菜单
• 调整子菜单的top和margin-top值，缩小与父菜单的间距
• 移除nav a:hover中破坏布局的position: absolute和left: 0样式

修改后的完整CSS代码 #

/* Dropdown menu */
nav ul {
    padding: 0px;
    margin: 100px 0 0 0; /* 修正margin，只保留顶部间距 */
    list-style: none;
    position: relative;
    font-size: 25px;
    background-color: white;
    cursor: pointer;
}

nav ul li {
    display: inline-block;
    padding: 0 20px;
    position: relative; /* 添加relative，作为子菜单的定位容器 */
}

nav a {
    display: block;
    padding: 0 10px;
    line-height: 60px;
    font-size: 20px;
    text-decoration: none;
    background-color: #FFFFFF;
    color: black;
}
/* Hide Dropdown by Default*/
nav ul ul {
    display: none;
    position: absolute;
    left: 50%; /* 子菜单左对齐父元素50%位置 */
    transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现居中 */
    top: 100%; /* 子菜单顶部对齐父元素底部 */
    margin-top: -1px; /* 缩小与父菜单的间距，抵消边框重叠 */
    padding: 0; /* 移除默认padding */
}
/* hover */
nav a:hover {
    background-color: #FFFFFF;
    color: #A4E5E0;
    border: 1px solid gray;
    /* 移除position: absolute和left: 0，避免破坏布局 */
}
/* Display Dropdown on Hover */
nav ul li:hover > ul {
    display: inherit;
}
/* First Tier Dropdown */
nav ul ul li {
    width: 350px;
    float: none;
    display: list-item;
    position: relative; /* 修正为relative，避免子菜单重叠 */
    border: 1px solid gray;
    border-top: none; /* 移除第一个子项的顶部边框，避免和父菜单边框重复 */
}

/* 给第一个子菜单项添加顶部边框 */
nav ul ul li:first-child {
    border-top: 1px solid gray;
}

修改后的HTML代码（结构不变，仅移除冗余内联样式） #

<body>
    <div id="container">
        <header>
            <nav>
                <ul>
                    <li>
                        Head Count
                        <ul>
                            <li class="nav-item">@Html.ActionLink("Agregar nuevo Head Count", "CreateHeadCount", "Home", new { area = "" }, null) </li>
                            <li class="nav-item">@Html.ActionLink("Editar Head Count", "EditHeadCount", "Home", new { area = "" }, null) </li>
                            <li class="nav-item">@Html.ActionLink("Actualizar Grupo", "UpdateAllHC", "Home", new { area = "" }, null) </li>
                        </ul>
                    </li>
                    <li>
                        SPH
                        <ul>
                            <li class="nav-item">@Html.ActionLink("SPH Acumulada", "GetSPH", "Home", new { area = "" }, null)  </li>
                            <li class="nav-item">@Html.ActionLink("Missing SPH", "MissingSPH", "Home", new { area = "" }, null)  </li>
                        </ul>
                    </li>
                    <li>
                        Work Orders
                        <ul>
                            <li class="nav-item">@Html.ActionLink("Returned work orders", "ReturnedWO", "Home", new { area = "" }, null) </li>
                            <li class="nav-item">@Html.ActionLink("Work orders without movement", "GetWOWithoutMov", "Home", new { area = "" }, null) </li>
                        </ul>
                    </li>
                    <li>
                        Weekly Efficiency
                        <ul>
                            <li class="nav-item">@Html.ActionLink("Add Weekly Efficiency", "DowngradeTierLevel", "Home", new { area = "" }, null)</li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</body>

效果说明 #

• 子菜单会精确居中对齐对应的父菜单项
• 子菜单与父菜单的间距被缩小，通过margin-top: -1px实现边框无缝衔接（若不需要边框衔接，可调整为margin-top: 0或其他数值）
• 父菜单的hover样式不再破坏整体布局

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