用js+样式实现横向二级导航。

你可以使用 HTML、CSS 和 JavaScript 实现横向二级导航。下面是一个简单的实现示例：

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

CSS 代码：

nav {
  background-color: #333;
}

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

nav li {
  display: inline-block;
  position: relative;
}

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

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

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul a {
  padding: 10px;
}

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

JavaScript 代码：

// 如果需要在响应式布局中隐藏二级菜单，可以使用以下代码：
var nav = document.querySelector('nav');
var menuToggle = document.getElementById('menu-toggle');

menuToggle.addEventListener('click', function() {
  nav.classList.toggle('hide-menu');
});

这个实现方式是基于鼠标悬停来显示二级菜单的。当鼠标悬停在一级菜单上时，它的子菜单就会显示出来。你可以自己调整 CSS 样式来满足自己的需求。