JavaScript编写代码实现如下功能： 鼠标指针经过菜单时，显示当前下拉框中的内容同时隐藏其他下拉菜单内容。

可以使用以下代码实现：

HTML部分：

<ul class="menu">
  <li>
    <a href="#">菜单1</a>
    <ul class="submenu">
      <li><a href="#">子菜单1-1</a></li>
      <li><a href="#">子菜单1-2</a></li>
      <li><a href="#">子菜单1-3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单2-1</a></li>
      <li><a href="#">子菜单2-2</a></li>
      <li><a href="#">子菜单2-3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单3</a>
    <ul class="submenu">
      <li><a href="#">子菜单3-1</a></li>
      <li><a href="#">子菜单3-2</a></li>
      <li><a href="#">子菜单3-3</a></li>
    </ul>
  </li>
</ul>

CSS部分：

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

.submenu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

.submenu li {
  margin: 0;
  padding: 0;
}

.menu li:hover > .submenu {
  display: block;
}

JavaScript部分：

const menuItems = document.querySelectorAll('.menu li');

menuItems.forEach(item => {
  item.addEventListener('mouseenter', (event) => {
    const currentSubmenu = item.querySelector('.submenu');
    const otherSubmenus = document.querySelectorAll('.submenu:not(:hover)');

    otherSubmenus.forEach(submenu => {
      submenu.style.display = 'none';
    });

    currentSubmenu.style.display = 'block';
  });
});

代码解释：

1. 首先，使用 CSS 隐藏所有下拉菜单（`.submenu`）。
2. 当鼠标经过菜单项（`.menu li`）时，使用 CSS 显示当前菜单项下的下拉菜单（`.menu li:hover > .submenu`）。
3. 在 JavaScript 中，使用 `querySelectorAll` 获取所有菜单项，并对每个菜单项添加 `mouseenter` 事件监听器。
4. 当鼠标进入菜单项时，获取当前菜单项下的下拉菜单（`.submenu`），并获取其他所有下拉菜单（`.submenu:not(:hover)`）。
5. 隐藏其他下拉菜单，显示当前下拉菜单。