React移动端下拉菜单UL列表从底部而非顶部展示问题咨询

问题原因 #

你的移动端下拉菜单倒序排列是两个样式问题共同导致的：

1. 移动端.nav-menu设置了height: 90vh的固定高度，却没有显式指定flex主轴的对齐规则，当子元素总高度远小于容器高度时，部分浏览器会默认将子元素向容器底部对齐，视觉上就表现为列表从下往上倒序排列
2. 媒体查询中给.nav-item额外加了不必要的position: relative属性，进一步干扰了flex布局的默认渲染逻辑

修复方案 #

直接修改Navbar.css中960px断点下的媒体查询代码即可：

@media screen and (max-width: 960px) {
    /* 删掉这段无效的.nav-item样式，避免干扰布局 */
    /* .nav-item {
      position: relative;
    } */
  
    .nav-menu {
      display: flex;
      flex-direction: column;
      justify-content: flex-start; /* 新增：明确指定子元素从容器顶部开始排列 */
      width: 100%;
      height: auto; /* 可选：如果不需要菜单占满90vh高度，改成auto更贴合内容长度 */
      position: absolute;
      top: 80px;
      left: -100%;
      opacity: 1;
      transition: all 0.5s ease;
    }

    /* 其余原有样式保持不变即可 */
}

修改后菜单会按照你JSX中写的<li>顺序从上到下正常排列，依次是Listings、Landlords、Services、Sign Up。

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