css 多级纵向下拉菜单

CSS多级纵向下拉菜单是一种常见的网页元素，常用于网站导航或者聚合分类菜单。本文将介绍如何使用CSS实现多级纵向下拉菜单。

code>
    !DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    title>
    CSS多级纵向下拉菜单/title>
    style>
/* 隐藏子菜单 */.sub-menu {
      display: none;
}
/* 鼠标悬浮在父菜单上，显示子菜单 */.menu-item:hover .sub-menu {
      display: block;
      position: absolute;
      top: 0;
      left: 100%;
}
/* 子菜单的样式 */.sub-menu li {
      display: block;
}
/* 多级菜单的样式 */.sub-menu .sub-menu li {
      border-top: 1px solid #ddd;
      position: relative;
      left: 100%;
      top: -1px;
}
    /style>
    /head>
    body>
      ul class="menu">
        li class="menu-item">
          a href="#">
    菜单1/a>
          ul class="sub-menu">
            li class="menu-item">
    a href="#">
    子菜单1-1/a>
    /li>
            li class="menu-item">
              a href="#">
    子菜单1-2/a>
              ul class="sub-menu">
                li class="menu-item">
    a href="#">
    子菜单1-2-1/a>
    /li>
                li class="menu-item">
    a href="#">
    子菜单1-2-2/a>
    /li>
              /ul>
            /li>
            li class="menu-item">
    a href="#">
    子菜单1-3/a>
    /li>
          /ul>
        /li>
        li class="menu-item">
          a href="#">
    菜单2/a>
          ul class="sub-menu">
            li class="menu-item">
    a href="#">
    子菜单2-1/a>
    /li>
            li class="menu-item">
    a href="#">
    子菜单2-2/a>
    /li>
            li class="menu-item">
    a href="#">
    子菜单2-3/a>
    /li>
          /ul>
        /li>
      /ul>
    /body>
    /html>
    /code>
    

首先，我们给所有的子菜单添加CSS样式"display: none; "，将其隐藏起来。然后，在鼠标悬浮在父菜单上时，给父菜单添加CSS样式".menu-item:hover .sub-menu{ display: block; } "，使得对应的子菜单显示出来。

如果要实现多级纵向下拉菜单，可以在子菜单中添加子菜单，样式可以使用"left"和"top"属性进行定位，使得子菜单"向右"顶出父菜单。

以上就是实现CSS多级纵向下拉菜单的基本原理，可以根据需要进行修改和调整。

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