如何让submenu居中显示在dropdown menu选项下方并统一尺寸？

针对你遇到的两个问题，以下是具体修复步骤：

问题1：子菜单盒子尺寸不一致 #

原因有两个：一是HTML中第二个子菜单项的class属性语法错误，二是子菜单项未设置均分宽度的布局规则。
修复步骤：

• 修正HTML语法：将<li class"item2">改为<li class="item2">
• 修改CSS：
  1. 移除.sub-menu li中的float: left;（父元素已用flex布局，float会干扰布局）
  2. 给.sub-menu li添加flex: 1;，让每个子菜单项平分容器宽度
  3. 给.sub-menu添加padding: 0;，清除默认内边距避免布局偏移

问题2：子菜单未在PRODUCTS下方居中 #

原因是下拉容器未设置相对定位基准，且未做居中偏移处理。
修复步骤：

• 给.dropdown添加position: relative;，让绝对定位的子菜单以它为基准
• 修改.dropdown-content的样式：
  1. 添加left: 50%; transform: translateX(-50%);实现水平居中
  2. 添加top: 100%;让子菜单紧贴主菜单下方（可根据需求调整数值）

修改后的完整代码 #

HTML代码

<header>
  <div class="main-navigation-bar">
    <div class="section-1">
      <div class="logo-box">
       <p>LOGO</p>
      </div>
    </div>
    <div class="section-2">
      <nav>
        <ul class="main-nav">
          <span class="dropdown">
          <li>Products
          <span class="sub-arrow">
            <i class="fas fa-chevron-down"></i>
            </span></span>
            <span class="dropdown-content">
            <ul class="sub-menu">
              <li class="item1 "><span class="product">Sub</span><p class="tagline">Lorem ipsum dolor</p></li>
              <li class="item2"><span class="product">Sub</span><p class="tagline">Lorem ipsum dolor</p></li>
            </ul>
            </span>
          </li>
          <li>Resources</li>
          <li>Company</li>
          <li>Careers</li>
          <li>Contact Us</li>
        </ul>
      </nav>
    </div>
  </div>
</header>

CSS代码

.main-navigation-bar {
  height: 94px;
  background-color: #00000000;
  display: flex;
}

.section-1 {
  width: 30%;
}

.section-2 {
  width: 70%;
  justify-content: flex-end;
  margin-left: auto; 
  margin-right: 0;
  flex-wrap: wrap;
  display: flex;
}

.main-nav {
  list-style-type: none;
  overflow: hidden;
  display: block;
}

.main-nav li{
  float: left;
  padding: 10px 20px 10px 20px;
  font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   font-style: normal;
   text-decoration: none;
   line-height: 24px;
   letter-spacing: .75px;
}

.dropdown {
  position: relative; /* 添加相对定位基准 */
}

.sub-menu {
  list-style-type:none;
  overflow:hidden;
  display: flex;
  position: static;
  height: auto !important;
  box-shadow: 0px 0px 2px 0px rgb(30 30 30 / 25%) !important;
  z-index: 3; /* 修正z-index单位错误 */
  border-radius: 8px;
  padding: 0; /* 清除默认内边距 */
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  left: 50%; /* 水平居中第一步 */
  transform: translateX(-50%); /* 水平居中第二步 */
  top: 100%; /* 紧贴主菜单下方 */
}

.dropdown:hover .dropdown-content {
  display: block;
}

.sub-menu li {
  padding: 24px 32px !important;
  flex: 1; /* 让子项均分宽度 */
  text-align: center; /* 可选：让文本居中更美观 */
}

.item1 {
  border-right: 1px solid #f2f2f2;
}

.product {
  display: block;
  font-size: 20px;
  font-weight: 700; /* 修正font-weight单位错误 */
  color: red;
}

.tagline {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .44px;
  text-transform: none;
}

额外修正了两个细节：

• .product中的font-weight: 700px;改为font-weight: 700;（字体粗细是数值，不需要px单位）
• .sub-menu中的z-index: 3px;改为z-index: 3;（z-index是层级数值，不需要px单位）

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