css怎么做折叠式菜单

CSS可以很轻松地制作折叠式菜单，下面我们来看看如何制作。

HTML结构如下：

ul class="menu">
      li>
    菜单1    ul class="sub-menu">
          li>
    子菜单1/li>
          li>
    子菜单2/li>
          li>
    子菜单3/li>
        /ul>
      /li>
      li>
    菜单2    ul class="sub-menu">
          li>
    子菜单4/li>
          li>
    子菜单5/li>
          li>
    子菜单6/li>
        /ul>
      /li>
    /ul>

CSS样式如下：

/* 默认隐藏子菜单 */.sub-menu {
      display: none;
}
    /* 点击菜单显示子菜单 */.menu li:hover >
 .sub-menu {
      display: block;
}
    

首先，我们通过CSS样式将子菜单默认隐藏。然后，我们通过使用:hover选择器，当鼠标悬停在菜单上时，显示子菜单。

当然，你可以通过其他方式实现折叠式菜单，比如使用JavaScript。但CSS方式更简单易用，效果也很好，可以很好地提高页面的用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！