假设你是一个前端工程师，使用原生的JS HTML CSS实现 hover 出现菜单栏

这是一个基本的HTML结构：

<nav>
  <ul>
    <li><a href="#">菜单项 1</a>
      <ul>
        <li><a href="#">子菜单项 1</a></li>
        <li><a href="#">子菜单项 2</a></li>
        <li><a href="#">子菜单项 3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项 2</a></li>
    <li><a href="#">菜单项 3</a>
      <ul>
        <li><a href="#">子菜单项 1</a></li>
        <li><a href="#">子菜单项 2</a></li>
        <li><a href="#">子菜单项 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

接下来，我们需要使用CSS样式为菜单添加样式，并将子菜单隐藏：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
  position: relative;
}

nav a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

nav ul li:hover > ul {
  display: inherit;
}

最后，我们需要使用JavaScript来处理菜单的 hover 事件，以显示或隐藏子菜单：

var nav = document.querySelector('nav');

nav.addEventListener('mouseover', function(e) {
  if (e.target.parentElement.tagName === 'LI') {
    var li = e.target.parentElement;
    var ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  }
});

nav.addEventListener('mouseout', function(e) {
  if (e.target.parentElement.tagName === 'LI') {
    var li = e.target.parentElement;
    var ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  }
});

这样，当鼠标移动到菜单项上时，子菜单就会显示出来。当鼠标离开菜单时，子菜单就会隐藏起来。