如何为现有导航栏的News标签添加悬停下拉列表

现有代码 #

CSS

.navbar {
  overflow: hidden;
  background-color: #2A3D5A;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #69788C;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 14px;
  width: 20%;
}

.navbar a:hover {
  background: #4F76B1;
  color: white;
}

.navbar a.active {
  background: #4F76B1;
  color: white;
}

HTML

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

增强方案（无需重写原有代码） #

只需要对HTML做少量修改，同时新增几行CSS规则即可：

修改后的HTML

仅在News标签后添加下拉容器，不改动其他原有元素：

<div class="navbar">
  <a href="#home">Home</a>
  <!-- 给News标签加类名用于定位，同时追加下拉容器 -->
  <a href="#news" class="news-trigger">News</a>
  <div class="news-dropdown">
    <a href="#link1">link 1</a>
    <a href="#link2">link 2</a>
    <a href="#link3">link 3</a>
  </div>
  <a href="#contact">Contact</a>
</div>

新增的CSS规则

直接追加到原有CSS末尾，完全不修改原有样式：

/* 下拉容器默认隐藏，绝对定位避免打乱导航布局 */
.news-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 20%; /* 对应原有导航项20%的宽度，精准对齐News标签 */
  background-color: #2A3D5A;
  width: 20%; /* 和导航项宽度保持一致 */
}

/* 悬停News时显示下拉，同时给下拉容器加hover，避免鼠标移开时菜单立刻消失 */
.news-trigger:hover + .news-dropdown,
.news-dropdown:hover {
  display: block;
}

/* 下拉菜单链接样式，继承导航栏基础样式，微调对齐方式 */
.news-dropdown a {
  float: none;
  width: auto;
  text-align: left;
  padding: 10px 15px;
}

方案说明 #

• 仅给News标签新增了一个类名用于定位，新增了下拉容器，原有HTML结构几乎无改动
• 新增CSS完全独立于原有样式，不会影响其他导航项的功能
• 用相邻兄弟选择器+实现悬停触发下拉，同时给下拉容器加hover事件，优化交互体验
• 下拉菜单的宽度、位置和原有导航项对齐，保持视觉一致性

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