html弹出式导航鼠标滑动到一个菜单显示出子菜单

这个效果可以通过HTML、CSS、JavaScript实现。具体实现步骤如下：

1. 在HTML中创建导航菜单和子菜单的结构，使用无序列表（<ul>）和列表项（<li>）来实现。
2. 使用CSS设置导航菜单和子菜单的样式，包括位置、大小、颜色、字体等。
3. 使用JavaScript实现鼠标滑动事件，当鼠标滑动到导航菜单的某个菜单项上时，显示该菜单项对应的子菜单，当鼠标离开导航菜单时，隐藏子菜单。

示例代码如下：

HTML:

<nav>
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <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>
        <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>
        <li><a href="#">子菜单3-1</a></li>
        <li><a href="#">子菜单3-2</a></li>
        <li><a href="#">子菜单3-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS:

nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
}

nav ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
}

nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  padding: 0;
  margin: 0;
}

nav ul ul li {
  display: block;
  margin: 0;
  padding: 0;
}

nav ul ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

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

JavaScript:

var menu = document.getElementsByTagName('nav')[0];
var menuItems = menu.getElementsByTagName('li');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseover', function() {
    this.getElementsByTagName('ul')[0].style.display = 'block';
  });
  
  menuItems[i].addEventListener('mouseout', function() {
    this.getElementsByTagName('ul')[0].style.display = 'none';
  });
}

在上述代码中，我们首先通过getElementsByTagName方法获取导航菜单，并获取所有菜单项，然后使用addEventListener方法为每个菜单项绑定鼠标滑动事件。当鼠标滑动到菜单项上时，使用style.display属性将该菜单项对应的子菜单显示出来，当鼠标离开菜单项时，隐藏子菜单。