css导航栏二级联动

CSS导航栏二级联动是指导航栏的第一级菜单的某些选项被悬停或点击时，第二级菜单会在页面上显示出来。这种交互方式可以方便用户浏览和查找所需的内容，增强网站的用户体验。

实现CSS导航栏二级联动的方法可以使用CSS伪类、CSS动画和JavaScript。其中，CSS伪类是最简单的方法之一。我们可以使用CSS伪类:hover为导航栏的第一级菜单添加鼠标悬停事件，然后使用CSS样式让第二级菜单显示出来。

/* HTML代码 */
<nav>
  <ul class="menu">
    <li>
      <a href="#">一级菜单1</a>
      <ul class="submenu">
        <li><a href="#">二级菜单1-1</a></li>
        <li><a href="#">二级菜单1-2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">一级菜单2</a>
      <ul class="submenu">
        <li><a href="#">二级菜单2-1</a></li>
        <li><a href="#">二级菜单2-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

/* CSS代码 */
.submenu {
  display: none; /* 隐藏第二级菜单 */
}
.menu>li:hover .submenu {
  display: block; /* 当第一级菜单被鼠标悬停时，显示第二级菜单 */
}

上面的代码在html中创建了一个导航栏，其中每个一级菜单都有一个对应的二级菜单。在CSS中，将所有二级菜单设为隐藏状态，然后使用:hover伪类将第二级菜单设为显示状态。这样，当用户鼠标悬停在第一级菜单上时，相关的二级菜单将在页面上显示出来。

需要注意的是，CSS伪类:hover只能针对鼠标事件作出反应。如果用户使用的设备没有鼠标，如平板电脑或手机，这种交互方式可能不太友好，需要使用JavaScript来提供其他的解决方案。