html二级导航栏代码

以下是一个简单的HTML二级导航栏代码示例：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</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="#">服务</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="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

在这个示例中，我们使用了<nav>元素来定义导航栏。导航栏包含一个无序列表<ul>，其中每个列表项<li>都包含一个链接<a>。当鼠标悬停在“产品”或“服务”链接上时，会显示一个下拉菜单，其中包含更多的链接。这些下拉菜单是通过在嵌套的无序列表中添加另一个列表项来创建的。

在上面的代码示例中，我们使用了CSS来样式化导航栏。以下是一个简单的CSS样式示例：

nav {
  background-color: #333;
  color: #fff;
  font-size: 18px;
}

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

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

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

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

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

nav ul ul li {
  display: block;
}

nav ul ul li a {
  padding: 10px 20px;
}

在这个CSS样式示例中，我们设置了导航栏的背景颜色、字体颜色和字体大小。我们还将无序列表的样式设置为无序列表项之间没有任何间距，并将列表项的显示设置为inline-block，以便它们可以在同一行上显示。我们还设置了链接的样式，包括内边距和文本装饰。

我们使用了CSS伪类选择器hover来创建下拉菜单。当鼠标悬停在列表项上时，我们将其下面的嵌套列表显示出来。我们还设置了下拉菜单的样式，包括绝对定位、背景颜色和内边距。

请注意，这只是一个简单的示例，您可以根据自己的需要进行更改和扩展。