css 左侧二级菜单

CSS 左侧二级菜单可以给网站带来更直观、醒目的导航功能。下面我们就来介绍一下如何实现：

首先，在 HTML 文件中创建一个无序列表 ul> ，并在其中嵌套多个有序列表 ol> ，每个有序列表为一个一级菜单：

ul>
      li>
        ol>
          li>
    a href="#">
    子菜单1.1/a>
    /li>
          li>
    a href="#">
    子菜单1.2/a>
    /li>
        /ol>
      /li>
      li>
        ol>
          li>
    a href="#">
    子菜单2.1/a>
    /li>
          li>
    a href="#">
    子菜单2.2/a>
    /li>
        /ol>
      /li>
      .../ul>

然后，在 CSS 文件中设定样式：

/* 一级菜单样式 */ul {
      list-style: none;
}
li {
      padding: 10px;
      background-color: #f5f5f5;
      border-bottom: 1px solid #ccc;
}
/* 二级菜单样式 */ol {
      display: none;
 /* 初始化时隐藏二级菜单 */}
li:hover ol {
      display: block;
     /* 当一级菜单 hover 时显示对应的二级菜单 */  position: absolute;
      top: 0;
      left: 100%;
}
li:hover ol li {
      width: 200px;
 /* 可自定义二级菜单的宽度 */}
    

这样，就可以在网站上实现一个简单的左侧二级菜单。

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