css 二级菜单联动

CSS二级菜单联动是指当鼠标悬浮在一级菜单上时，二级菜单会自动显示，并随着一级菜单的改变而跟随联动改变。这样可以方便用户浏览网站内容，提升用户体验。

  <nav>
    <ul>
      <li>
        <a href="#">一级菜单1</a>
        <ul class="second-menu">
          <li><a href="#">二级菜单1.1</a></li>
          <li><a href="#">二级菜单1.2</a></li>
          <li><a href="#">二级菜单1.3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">一级菜单2</a>
        <ul class="second-menu">
          <li><a href="#">二级菜单2.1</a></li>
          <li><a href="#">二级菜单2.2</a></li>
          <li><a href="#">二级菜单2.3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  
  <style>
    .second-menu {
      display: none;
    }
    
    li:hover > .second-menu {
      display: block;
    }
  </style>

上述代码使用了CSS中的:hover伪类，当鼠标悬浮在一级菜单上时，就会显示对应的二级菜单。同时，通过设置二级菜单的display属性，可以隐藏二级菜单，避免占用过多页面空间。

这样，我们就可以在网站中轻松实现CSS二级菜单联动效果，提高用户的浏览体验。