CSS导航栏样式优化请求：实现固定位置的响应式Dropdown

你当前的下拉菜单是相对于父级<li>元素定位的，所以悬停不同导航项时，子菜单会跟着父元素位置变化。要实现类似lululemon官网的固定位置下拉效果，只需调整定位的基准容器，让所有子菜单基于同一个父级定位：

修改思路 #

• 将.nav-list设置为position: relative，作为所有子菜单的定位参考容器
• 让.sub-menu相对于.nav-list定位，而非单个导航项的<li>
• 统一子菜单的位置参数，确保所有下拉内容出现在同一区域

修改后的代码 #

CSS

nav {
  display: inline-flex;
  width: 100%;
}

.nav-list {
  display: flex;
  width: 100%;
  margin-top: .7rem;
  padding-left: 1.1rem;
  position: relative; /* 设置为子菜单的定位父级 */
}

.nav-list li {
  /* 移除原position: relative，避免子菜单以单个列表项为基准 */
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1rem;
  padding: 1.3rem 1rem;
  text-transform: uppercase;
  transition: color 300ms;
}

.sub-menu a {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 0 40px;
  display: block;
  margin-top: 2rem; /* 用margin替代relative的top，避免定位冲突 */
}

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: black;
  visibility: hidden;
  width: 50rem;
  height: 15rem;
  top: 100%; /* 子菜单顶部对齐导航列表底部 */
  left: 0; /* 子菜单左侧对齐导航列表左侧 */
  opacity: 0; /* 添加过渡效果，优化显示体验 */
  transition: opacity 300ms ease;
}

.nav-list li:hover>.sub-menu {
  visibility: visible;
  opacity: 1;
  /* 移除原top值，位置由.sub-menu的top属性控制 */
}

HTML（保持原结构即可）

<nav>
  <ul class="nav-list">
    <li>
      <a href="">Men</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Mens shirts</a>
        </li>
        <li>
          <a href="#">Mens Shorts</a>
        </li>
        <li>
          <a href="#">Mens Accessories</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Women</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Womens shirts</a>
        </li>
        <li>
          <a href="#">Womens Shorts</a>
        </li>
        <li>
          <a href="#">Womens Accessories </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

关键说明 #

1. 把定位基准从单个<li>转移到.nav-list后，所有子菜单的位置计算都基于同一个容器，自然会固定在同一区域
2. 添加opacity过渡效果，让下拉菜单的显示/隐藏过程更平滑
3. 用margin-top替代position: relative的top调整子菜单内链接的位置，避免嵌套定位引发的布局冲突

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