React导航栏Dropdown无法正常显示在顶部的问题求助

问题详情 #

我在React项目里做导航栏，下拉菜单没法像正常那样显示在所有元素上面。调了半天position和z-index，控制台看z-index数值够高，position设的relative也没问题，但就是不生效。

导航栏HTML代码 #

<ul className="topnav" id="myTopnav">
  <li>
    <img src={logo} id="logo" />
  </li>
  <li>
    <a href="default.asp">Barbershop Apparel</a>
  </li>
  <li>
    <a href="news.asp">Politics</a>
  </li>
  <li>
    <a href="contact.asp">Business</a>
  </li>
  <li className="dropdown">
    <a href="#">
      Dropdown <i className="Dropdown-div"></i>
    </a>
    <div className="dropdown-content">
      <a className="dropdown-items" href="#">
        Link 1
      </a>
      <a className="dropdown-items" href="#">
        Link 2
      </a>
      <a className="dropdown-items" href="#">
        Link 3
      </a>
    </div>
  </li>
  <li>
    <a href="about.asp">Entertainment</a>
  </li>
  <li>
    <a href="about.asp">More</a>
  </li>
  <li>
    <a href="https://www.facebook.com/Barbershoptalk.posts">
      <img src={facebookLogo} id="logoFacebook" />
    </a>
  </li>
  <li>
    <a href="https://www.instagram.com/thebarbershop.talk/">
      <img src={instaLogo} id="logoInsta" />
    </a>
  </li>
</ul>

原CSS代码 #

/* navbar */
#logo {
    height: 90px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}
#logoInsta {
    height: 65px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}
#logoFacebook {
    height: 65px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

ul {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0062b2;
    border-bottom: 2px solid #dd3333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 30px 16px;
    text-decoration: none;
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    position: relative;
    z-index: 10;
}

/* 鼠标悬停改变链接颜色 */
li a:hover {
    background-color: #dd3333;
    color: white;
}

.dropdown-content {
    display: none;
    background-color: #dd3333;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    position: relative;
    z-index: 10;
}

.dropdown:hover .dropdown-content {
    display: block;
    position: relative;
    border: solid 1px white;
    z-index: 10;
}

.dropdown-items:hover {
    position: relative;
    list-style-type: inside;
    z-index: 10;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* 点击图标后添加的响应式类，让导航栏在小屏幕垂直显示 */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

修复步骤 #

1. 移除导航栏容器的overflow: hidden #

这是核心问题：<ul>标签的overflow: hidden会直接裁剪掉超出导航栏高度的下拉菜单，和z-index无关。修改后的ul样式：

ul {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* 删除 overflow: hidden; */
    background-color: #0062b2;
    border-bottom: 2px solid #dd3333;
}

2. 修正下拉菜单的定位方式 #

当前.dropdown-content用position: relative会占据文档流空间，导致导航栏被撑开。改成absolute实现悬浮定位，同时给父元素.dropdown设置relative作为定位参考：

/* 给下拉菜单父元素设置定位容器 */
.dropdown {
    position: relative;
}

/* 重新设置下拉菜单样式 */
.dropdown-content {
    display: none;
    background-color: #dd3333;
    min-width: 160px; /* 替换width:100%，避免过宽 */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    position: absolute; /* 改为绝对定位 */
    top: 100%; /* 定位在父元素底部 */
    left: 0;
    z-index: 100; /* 提高层级确保在最上层 */
}

.dropdown:hover .dropdown-content {
    display: block;
    border: solid 1px white;
    /* 移除重复的position: relative */
}

3. 其他优化 #

• 把重复的id="dropdown-items"改成class="dropdown-items"（HTML中id必须唯一）
• 图片跳转需要用<a>标签包裹<img>，原代码里直接给img加href是无效的，已在上面的HTML代码中修正

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