css 左侧树型菜单直显

CSS左侧树形菜单直显是一种常见的网站界面设计技巧，能够帮助用户快速了解网站结构，易于浏览和使用。

通过使用CSS样式表和HTML列表元素，可以轻松地实现左侧树形菜单直显。以下是示例HTML和CSS代码：

ul class="tree-menu">
      li>
    菜单1    ul>
          li>
    子菜单1/li>
          li>
    子菜单2/li>
        /ul>
      /li>
      li>
    菜单2    ul>
          li>
    子菜单3/li>
          li>
    子菜单4/li>
        /ul>
      /li>
    /ul>
.tree-menu {
      list-style: none;
      padding: 0;
      margin: 0;
}
.tree-menu li {
      position: relative;
      padding-left: 20px;
      cursor: pointer;
}
.tree-menu li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ccc;
}
.tree-menu li:after {
      content: "";
      position: absolute;
      left: 4px;
      top: 10px;
      height: 0;
      border-left: 2px solid #ccc;
      border-top: 2px solid #ccc;
      border-bottom: 2px solid #ccc;
      transform: rotate(-45deg);
      transition: all 0.2s ease-in-out;
}
.tree-menu li:before:hover,.tree-menu li:after:hover {
      background: #0077c0;
}
.tree-menu ul {
      margin: 0;
      padding: 0;
      display: none;
}
.tree-menu ul.open {
      display: block;
}
    

上面的代码中，通过在li元素前面添加空心圆和箭头，来表示菜单的层级关系，同时通过设置hover效果和打开子菜单的CSS样式，增加用户体验。

通过这种CSS左侧树形菜单直显的设计，能够有效提高网站的导航和操作效率，让用户轻松找到自己所需的页面。同时，这种菜单的设计也可以应用于移动端的网页设计中，为用户的手指操作提供更友好的界面。

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