html中二级导航怎么做

在HTML中创建二级导航（也称为下拉菜单或子菜单）可以提升网站用户体验，使得内容组织更加清晰，以下是创建二级导航的步骤，以及相应的HTML和CSS代码。

1、创建基本结构

我们需要创建一个包含二级导航的基本HTML结构，这通常包括一个主导航栏，以及几个包含下拉菜单的链接。

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li>
      <a href="#news">新闻</a>
      <ul>
        <li><a href="#news1">新闻1</a></li>
        <li><a href="#news2">新闻2</a></li>
        <li><a href="#news3">新闻3</a></li>
      </ul>
    </li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

2、添加CSS样式

接下来，我们需要为导航栏添加一些基本的CSS样式，以确保它在页面上看起来整洁、美观，我们还可以添加一些CSS来控制下拉菜单的显示和隐藏。

/* 基本样式 */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #333;
}
nav li {
  float: left;
}
nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 鼠标悬停时的样式 */
nav a:hover, nav li:hover ul {
  background-color: #ddd;
}
nav li:hover a {
  color: black;
}
/* 二级导航的样式 */
nav ul ul {
  display: none;
  position: absolute;
  min-width: 160px;
}
nav ul li:hover > ul {
  display: block;
}
nav ul ul li {
  clear: both;
  width: 100%;
}

3、控制下拉菜单的显示和隐藏

在上述CSS代码中，我们使用了display: none;来隐藏所有的二级导航，当鼠标悬停在父级链接上时，我们通过改变display属性来显示二级导航，这样，用户在浏览网站时，只有当他们需要查看二级导航时，下拉菜单才会显示出来。

4、响应式设计

为了确保二级导航在不同设备上都能正常工作，我们可以添加一些媒体查询来调整布局，我们可以在较小的屏幕上使用垂直导航菜单。

@media screen and (max-width: 600px) {
  nav ul li {
    float: none;
  }
  nav ul ul {
    position: static;
  }
}

创建二级导航是一个简单的过程，涉及到基本的HTML结构和CSS样式，通过使用CSS控制显示和隐藏，我们可以为用户提供一个直观且易于导航的菜单系统，响应式设计确保了导航在不同设备上都能正常工作，提高了网站的可访问性。