解决CSS下拉菜单遮挡问题：理解Position与Z-index的正确应用

.dropdown-content {
  display: none;
  /* ... */
  position: relative; /* 问题所在 */
  z-index: 10;
}

.dropdown:hover .dropdown-content {
  display: block;
  position: relative; /* 问题所在 */
  /* ... */
  z-index: 10;
}

.dropdown {
  float: left; /* 保持原有的布局 */
  position: relative; /* 为下拉菜单内容提供定位上下文 */
}

.dropdown-content {
  display: none;
  background-color: #dd3333;
  min-width: 160px; /* 建议使用min-width而不是width: 100%以避免超出父元素宽度 */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  position: absolute; /* 关键：脱离文档流，相对于最近的已定位祖先元素定位 */
  z-index: 1000; /* 确保足够高的z-index值，以覆盖其他内容 */
  left: 0; /* 从父元素的左边缘开始 */
  top: 100%; /* 位于父元素下方 */
}

.dropdown:hover .dropdown-content {
  display: block;
  /* position: absolute;  保持absolute，无需重复声明 */
  border: solid 1px white;
  /* z-index: 1000; 无需重复声明 */
}

<ul className="topnav" id="myTopnav">
  <li>
    <img src={logo} id="logo" alt="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-item" href="#">
        Link 1
      </a>
      <a className="dropdown-item" href="#">
        Link 2
      </a>
      <a className="dropdown-item" href="#">
        Link 3
      </a>
    </div>
  </li>
  <li>
    <a href="about.asp">Entertainment</a>
  </li>
  <li>
    <a href="about.asp">More</a>
  </li>
  <li>
    <img
      src={facebookLogo}
      id="logoFacebook"
      href="https://www.facebook.com/Barbershoptalk.posts"
      alt="Facebook Logo"
    />
  </li>
  <li>
    <img
      src={instaLogo}
      id="logoInsta"
      href="https://www.instagram.com/thebarbershop.talk/"
      alt="Instagram Logo"
    />
  </li>
</ul>

/* 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; /* 导航栏ul通常需要相对定位，以便内部元素（如可能的其他绝对定位元素）能相对它定位 */
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 保持浮动元素的容器效果 */
  background-color: #0062b2;
  border-bottom: 2px solid #dd3333;
}

li {
  float: left;
}

/* 为包含下拉菜单的li设置相对定位 */
.dropdown {
  float: left;
  position: relative; /* 关键：为.dropdown-content提供定位上下文 */
}

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; 对于普通链接通常不需要，除非有特殊层叠需求 */
}

/* Change the link color on hover */
li a:hover {
  background-color: #dd3333;
  color: white;
}

.dropdown-content {
  display: none;
  background-color: #dd3333;
  min-width: 160px; /* 建议使用min-width，确保内容可读性 */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  position: absolute; /* 关键：脱离文档流 */
  z-index: 1000; /* 确保足够高的z-index值 */
  left: 0; /* 相对于父级.dropdown的左边缘定位 */
  top: 100%; /* 位于父级.dropdown的底部下方 */
  border: solid 1px white; /* 移到这里，无论是否hover都保持边框 */
}

.dropdown:hover .dropdown-content {
  display: block;
  /* position, z-index, border等已在.dropdown-content中定义，无需重复 */
}

/* 修正：使用类选择器 .dropdown-item 代替重复ID */
.dropdown-item {
  color: white; /* 确保下拉项文字颜色 */
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: "Titillium Web", sans-serif; /* 继承或自定义字体 */
  font-size: 18px; /* 调整字体大小 */
}

.dropdown-item:hover {
  background-color: #f1f1f1;
  color: #333; /* 悬停时文字颜色变化 */
}

/* 原始代码中的.dropdown-items:hover已过时，且ID重复，应使用修正后的.dropdown-item:hover */
/* .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;
  }
}