JS当鼠标经过后面两个标题时，显示该标题对应的下拉菜单，且将该标题的字体颜色任意改变一个颜色； 要求2：当鼠标移开后面两个标题时，隐藏该标题对应的下拉菜单，且将该标题的字体颜色恢复到初始状态。

好的，这个需求可以通过以下步骤实现：

1. 获取需要操作的元素，比如标题和下拉菜单。
2. 给前面三个标题添加鼠标单击事件，当鼠标单击时，为该标题添加 `current` 类选择器，同时切换到该标题对应的主体模块内容。
3. 给后面两个标题添加鼠标经过事件，当鼠标经过时，显示该标题对应的下拉菜单，并将字体颜色改变为任意颜色。
4. 给后面两个标题添加鼠标离开事件，当鼠标离开时，隐藏该标题对应的下拉菜单，并将字体颜色恢复到初始状态。

以下是一个简单的实现示例：

HTML代码：

<div class="header">
  <ul class="nav">
    <li class="nav-item current">标题1</li>
    <li class="nav-item">标题2</li>
    <li class="nav-item">标题3</li>
    <li class="nav-item dropdown">标题4
      <ul class="dropdown-menu">
        <li>下拉菜单1</li>
        <li>下拉菜单2</li>
        <li>下拉菜单3</li>
      </ul>
    </li>
    <li class="nav-item dropdown">标题5
      <ul class="dropdown-menu">
        <li>下拉菜单4</li>
        <li>下拉菜单5</li>
        <li>下拉菜单6</li>
      </ul>
    </li>
  </ul>
</div>

CSS代码：

.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 20px;
  cursor: pointer;
}

.current {
  color: red;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.dropdown-menu li {
  margin-bottom: 5px;
  cursor: pointer;
}

.nav-item:hover,
.dropdown:hover > .dropdown-menu {
  display: block;
}

.nav-item:hover {
  color: blue;
}

JavaScript代码：

// 获取需要操作的元素
const navItems = document.querySelectorAll('.nav-item');
const dropdowns = document.querySelectorAll('.dropdown');

// 给前面三个标题添加鼠标单击事件
navItems.forEach((item, index) => {
  if (index < 3) {
    item.addEventListener('click', () => {
      // 为该标题添加 current 类选择器
      navItems.forEach((item) => {
        item.classList.remove('current');
      });
      item.classList.add('current');
      // 切换到该标题对应的主体模块内容（这里只是 console.log 提示，实际应该有其他操作）
      console.log(`当前选中的是第 ${index + 1} 个标题`);
    });
  }
});

// 给后面两个标题添加鼠标经过事件
dropdowns.forEach((dropdown) => {
  const navItem = dropdown.parentElement;
  navItem.addEventListener('mouseenter', () => {
    // 显示该标题对应的下拉菜单
    dropdown.style.display = 'block';
    // 将字体颜色改变为任意颜色
    navItem.style.color = 'green';
  });
});

// 给后面两个标题添加鼠标离开事件
dropdowns.forEach((dropdown) => {
  const navItem = dropdown.parentElement;
  navItem.addEventListener('mouseleave', () => {
    // 隐藏该标题对应的下拉菜单
    dropdown.style.display = 'none';
    // 将字体颜色恢复到初始状态
    navItem.style.color = '';
  });
});