HTML中如何实现多导航按钮共存仅单个支持hover悬浮下拉菜单

修正后完整代码 #

HTML部分 #

<nav class="nav-bar">
  <!-- About按钮和下拉菜单单独放在一个容器，仅hover该容器才触发下拉 -->
  <div class="about-wrapper">
    <a class="nav-btn about" href="about.html">About</a>
    <div class="dropdown-content"> 
      <a href="achievements.html">Achievements</a>
      <a href="education.html">Education</a>
      <a href="hobbies.html">Hobbies</a>
      <a href="career.html">Career</a>
    </div>
  </div>
  <a class="nav-btn gallery" href="gallery.html">Gallery</a>
  <a class="nav-btn contact" href="contact.html">Contact</a>
</nav>

CSS部分 #

/* 导航栏整体用flex布局实现横向排列 */
.nav-bar{
  font-size: 22px;
  font-family: "Arvo", serif;
  font-weight: bold;
  display: flex;
  justify-content: flex-end; /* 保持原需求的右对齐效果 */
  gap: 20px; /* 按钮间距可自行调整 */
  position: relative;
} 
/* 导航按钮统一样式 */
.nav-btn {
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
}
/* About容器用来关联hover触发逻辑 */
.about-wrapper {
  position: relative;
}
/* 下拉内容改为绝对定位，不挤占页面其他内容位置 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* 紧贴About按钮下方显示 */
  left: 0;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
}
/* 下拉菜单内链接样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
/* 仅hover About容器时展示下拉菜单 */
.about-wrapper:hover .dropdown-content {
  display: block;
}
.about-wrapper:hover .about {
  background-color: transparent;
}

主要修改说明 #

• 修复原HTML语法错误：原代码<button>标签错误用</a>闭合，且<button>本身不支持href属性，导航项改用更适配场景的<a>标签实现。
• 调整DOM结构：将About按钮和下拉菜单单独包裹在父容器中，把下拉触发范围严格限定在该容器内，避免hover其他导航按钮误触发下拉。
• 新增flex布局实现导航项横向排列，解决按钮无法并列的问题。
• 下拉菜单定位从relative改为absolute，避免下拉展示时挤占页面其他内容的空间。
• 修正hover触发选择器逻辑，完全匹配需求的触发规则。

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