HTML+CSS制作横向二级菜单栏

好的，以下是一个简单的HTML+CSS制作横向二级菜单栏的示例代码：

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>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </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;
  padding: 0;
  margin: 0;
}

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

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

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

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

nav ul ul li {
  float: none;
  width: 100%;
}

nav ul ul a {
  padding: 5px 10px;
  display: block;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

nav ul li:hover > a {
  background-color: #f8f8f8;
}

nav ul ul li:hover > a {
  background-color: #f1f1f1;
}

nav a:focus {
  outline: none;
}

@media screen and (max-width: 768px) {
  nav ul li {
    float: none;
  }
  nav ul ul {
    position: static;
    display: none;
  }
  nav ul li:hover > ul {
    display: none;
  }
  nav ul ul li {
    display: block;
    width: 100%;
  }
}

在以上代码中，我们首先创建了一个 `nav` 元素，内含一个无序列表 `ul`，列表项 `li` 中包含了一个链接 `a` 和一个子菜单的无序列表 `ul`，子菜单列表项也是 `li`，链接也是 `a`，以此类推。

CSS 中，我们使用了 `float` 属性使菜单项横向排列，使用了 `position: absolute` 属性将子菜单定位在其父菜单下方，使用了 `display: none` 属性将子菜单默认隐藏，然后使用 `:hover` 伪类选择器来控制菜单项和子菜单的显示和隐藏。同时，我们还使用了媒体查询 `@media` 来控制菜单在小屏幕设备上的响应式布局。

希望这个示例代码能够帮到你，如果有疑问可以随时问我。