如何为现有HTML导航栏的About对应<li>元素添加可悬停下拉菜单

正确实现代码 #

第一步：修改HTML结构

你之前写法失效的核心原因是违反了HTML列表嵌套规则：<li>的直接子元素不能是另一个<li>，子菜单必须用<ul>包裹后作为父级<li>的子元素插入，以下是适配你现有结构的代码：

<ul class="nav-menu list-unstyled">
  <li><a href="#header" class="smoothScroll">Home</a></li>
  <li class="nav-parent">
    <a href="#about" class="smoothScroll">About</a>
    <!-- 下拉菜单开始 -->
    <ul class="sub-nav list-unstyled">
      <li><a href="#team" class="smoothScroll">Team</a></li>
      <li><a href="#history" class="smoothScroll">发展历程</a></li>
      <li><a href="#culture" class="smoothScroll">企业文化</a></li>
      <!-- 可自行添加更多子选项 -->
    </ul>
    <!-- 下拉菜单结束 -->
  </li>
  <li><a href="#services" class="smoothScroll">Services</a></li>
  <li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>

第二步：添加配套CSS样式

将以下代码加入你的样式文件即可实现悬停触发效果，不需要额外引入JS：

/* 父菜单项设置相对定位，用于定位下拉菜单 */
.nav-parent {
  position: relative;
}
/* 默认隐藏子菜单 */
.sub-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 120px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 8px 0;
}
/* 调整子菜单项内边距，可按需修改 */
.sub-nav li {
  padding: 4px 16px;
}
/* 悬停父菜单项时显示子菜单 */
.nav-parent:hover .sub-nav {
  display: block;
}

注意事项 #

• 上述代码完全兼容你原有结构的类名，不需要修改原有导航的其他样式，如果你原有导航是横向排列的，只要父级<li>本身是浮动或flex布局，不需要额外调整就能正常显示
• 如果你项目中已经引入了Bootstrap框架，也可以直接使用框架自带的dropdown组件替换，兼容性和交互效果会更好

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