如何在单导航栏创建独立下拉按钮？HTML/CSS技术求助

嘿，我一眼就看出问题出在哪了——你把两个下拉按钮塞进了同一个.dropdown容器里！当鼠标悬停在这个容器上时，容器内所有的.dropbtn都会触发hover样式，两个下拉内容也会同时显示，自然就出现了同步触发的问题。

解决方案：给每个下拉菜单独立的容器 #

你需要把"About Us"和"Our Athletes"分别放在各自的.dropdown容器中，让它们的hover状态和下拉内容完全独立。下面是修正后的完整代码：

修正后的HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rtsnp_home.css">
<!-- 记得引入Font Awesome，不然下拉箭头不显示 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Rolling Thunder Special Needs Program</title>
</head>
<body>
<div class="navbar">
  <a href="#home">Home</a>
  <!-- 第一个独立的下拉菜单：About Us -->
  <div class="dropdown">
    <button class="dropbtn">About Us <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">Mission Statement</a>
      <a href="#">Our Founder</a>
      <a href="#">Our Board of Directors</a>
      <a href="#">National Board of Directors</a>
      <a href="#">Programs Offered</a>
    </div>
  </div>
  <!-- 第二个独立的下拉菜单：Our Athletes -->
  <div class="dropdown">
    <button class="dropbtn">Our Athletes <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#"> Link 1</a>
    </div>
  </div>
</div>
</body>
</html>

CSS代码（无需修改，保持你的原有代码即可）

h1 { text-decoration: underline; text-align: center; }
h3 { text-align: center; }
body { background-color: #BBBCC0; }
p { text-align: center; }
.navbar { overflow: hidden; background-color: #333; font-family: Arial; }
.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; }
.navbar a:hover, .dropdown:hover .dropbtn { background-color: green; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #ddd; }
.dropdown:hover .dropdown-content { display: block; }

关键修改说明 #

• 把原来嵌套在同一个.dropdown里的两个按钮和下拉内容，拆分成了两个独立的.dropdown容器，每个容器对应一个下拉按钮和它的下拉菜单。
• 补充了Font Awesome的CDN链接（如果你的项目里已经引入过，可以忽略这一步），这样下拉箭头<i class="fa fa-caret-down"></i>才能正常显示。

这样修改后，每个下拉菜单的hover状态和下拉内容就完全独立了，鼠标悬停"About Us"时只会触发它自己的下拉效果，"Our Athletes"不会受到影响。

内容的提问来源于stack exchange，提问作者K. Olofson