如何实现CSS子菜单从左侧全屏展开（规避fixed与sticky冲突）

你当前手动调整left值的方式适配性差，窗口尺寸变化时容易错位。下面是更稳健的实现方式，无需硬编码偏移量：

核心思路 #

• 将子菜单的定位参考逻辑从父级<li>改为视口全局，用left: 50%; transform: translateX(-50%)实现子菜单相对于视口居中，配合width: 100vw铺满屏幕宽度。
• 移除所有手动设置的固定left偏移值，避免硬编码带来的适配问题。
• 用top: 100%替代固定像素值，让子菜单刚好衔接在父级导航项的底部，自适应导航栏高度变化。

优化后的完整代码 #

CSS 部分 #

.main-navbar{
    position: absolute;
    display: inline-flex;
    background-color:white;
    top: 3.7rem;
    width: 100%;
    height: 4.5rem;
    align-items: center;
    /* 新增：为子菜单提供规范的定位上下文 */
    position: relative;
}

.logo img{
    position: relative;
    margin-right: 11.1rem;
    left: 9%;
    margin-top: 0px;
    width: 330px ;
    transition: 0.1s ease-in-out;
}

nav{
    display: inline-flex;
    width: 100%;
    align-items: center;
}
.nav-list{
    font-size: 1rem;
    display: flex;
    margin-top: .7rem;
    margin-left: 2.7rem;
}

.nav-list li{
    position: relative;
}

.nav-list > li > a{
    color: black;
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
    padding: 1.3rem 1rem;
}

.nav-list > li > a::after{
content: "";
position: absolute;
background-color: red;
height: 4px;
width: 0;
left: 0;
bottom: 1px;
/* 新增：下划线过渡动画 */
transition: width 0.3s ease;
}

.sub-menu {
    display: flex;
    position: absolute;
    background-color: white;
    visibility: hidden;
    /* 新增：透明度过渡实现平滑显示 */
    opacity: 0;
    /* 替代固定像素：让子菜单紧贴父级底部 */
    top: 100%;
    /* 核心：先定位到父级中心，再偏移自身宽度的50%实现视口居中 */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; 
    height: 35rem;
    transition: opacity 0.3s ease;
}

.sub-menu a {
    position: relative;
    font-weight: 200;
    padding: 3rem 40px 0 40px;
    display: block;
    width: 100%;
}

/* 移除冗余的手动偏移样式 */
/* #submenu2{
    position:absolute;
    left: -38.595rem;
} */

.nav-list>li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

.nav-list>li:hover>a::after {
width: 100%;
}

HTML 部分 #

<div class="main-navbar" id="navbar">
  <div class="logo">
    <img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt="Nike Logo">
  </div>
  <nav>
    <ul class="nav-list">
      <li class="dropdown-item-1">
        <a href="men.html">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
      <li class="dropdown-item-2">
        <a href="#">Women</a>
        <!-- 移除冗余ID，统一子菜单样式 -->
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

关键改进点 #

• 适配性提升：无论窗口缩放还是设备尺寸变化，子菜单始终对齐视口左侧并铺满宽度，不会出现错位。
• 交互更流畅：通过opacity过渡动画，解决直接切换visibility导致的生硬显示问题。
• 代码更简洁：移除冗余的ID和硬编码偏移，统一子菜单样式逻辑，后期维护更方便。

内容的提问来源于stack exchange，提问作者Thor The dog