如何仅为全局导航（Global Nav）的第二个元素添加悬停下拉菜单？

首先，咱们要先调整你生成导航的JS代码，给第二个导航项嵌套下拉菜单的结构，然后用CSS实现悬停显示的效果。

第一步：修改JS中的导航结构 #

把你原来的第二个<li>改成包含下拉菜单的结构，我给你写好修改后的代码片段：

document.getElementById("myNav").innerHTML = 
  "<ul id='nav' class='nav navbar-nav'>" + 
    "<li><a href='https://home.com/'>Home</a></li>" + 
    // 这里是修改后的第二个导航项，带下拉菜单
    "<li class='dropdown-nav-item'>" +
      "<a href='https://gear.com'>Gear Rev...</a>" +
      "<ul class='dropdown-menu'>" +
        "<li><a href='#'>你的第一个子项目</a></li>" +
        "<li><a href='#'>你的第二个子项目</a></li>" +
      "</ul>" +
    "</li>" +
    // 这里可以继续加其他导航项
  "</ul>";

注意：我把原来的id='nav navbar-nav'拆成了id='nav'加class，避免ID里有空格的问题，这是HTML规范里的小细节~

第二步：添加CSS实现悬停下拉效果 #

接下来写CSS样式，控制下拉菜单的显示和隐藏，以及基础的样式美化：

/* 基础导航布局，你可以根据自己的网站风格调整 */
.nav.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  background-color: #2c3e50;
  padding: 1rem 2rem;
}

.nav.navbar-nav li {
  position: relative; /* 让下拉菜单相对于这个li定位 */
}

.nav.navbar-nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 0;
}

/* 默认隐藏下拉菜单 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0.8rem 0;
  margin: 0;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  display: none;
  min-width: 180px;
  border-radius: 4px;
}

.dropdown-menu a {
  color: #2c3e50;
  padding: 0.5rem 1.2rem;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f8f9fa;
}

/* 悬停时显示下拉菜单 */
.dropdown-nav-item:hover .dropdown-menu {
  display: block;
}

额外说明（如果你用Bootstrap的话） #

看你原来的代码用了navbar-nav类，要是你的项目已经引入了Bootstrap，那可以直接用它自带的Dropdown组件，更省心：
把第二个<li>改成这样：

<li class="dropdown">
  <a class="dropdown-toggle" href="https://gear.com" role="button" data-bs-toggle="dropdown">Gear Rev...</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">子项目1</a></li>
    <li><a class="dropdown-item" href="#">子项目2</a></li>
  </ul>
</li>

不过Bootstrap默认是点击触发下拉，要是想要悬停触发，再加这段CSS：

.dropdown:hover .dropdown-menu {
  display: block;
}

这样就能完美实现你要的「仅第二个导航项带悬停下拉菜单」的需求啦！

内容的提问来源于stack exchange，提问作者Rich C.