css 左侧二级导航菜单

CSS 左侧二级导航菜单是用于网页导航和分类展示的常见设计，通过简单的 CSS 样式设定可以轻松实现此功能。

首先，HTML 结构需要定义导航菜单的基本框架，这包括导航菜单的父容器和导航链接的 HTML 描述：

div class="nav">
      ul>
        li>
    a href="#">
    一级导航/a>
    /li>
        li>
          a href="#">
    一级导航/a>
          ul class="sub-nav">
            li>
    a href="#">
    二级导航/a>
    /li>
            li>
    a href="#">
    二级导航/a>
    /li>
          /ul>
        /li>
      /ul>
    /div>

以上代码中，导航菜单的 HTML 结构使用了无序列表和链接的嵌套结构，其中一级导航使用 li 和 a 标签组成，而二级导航使用 li 和 a 标签嵌套在一个 ul 标签中。

为了使用 CSS 样式设定实现导航菜单的样式，需要定义 .nav 和 .sub-nav 两个样式规则。

.nav {
      width: 200px;
}
.nav ul {
      list-style: none;
      padding-left: 0;
}
.nav li {
      border-bottom: 1px solid #ccc;
}
.nav li a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
}
.sub-nav {
      display: none;
}
.nav li:hover .sub-nav {
      display: block;
}
.sub-nav li {
      border-bottom: none;
}
.sub-nav li a {
      display: block;
      padding: 5px 20px;
      text-decoration: none;
      color: #fff;
      background-color: #333;
}
.sub-nav li a:hover {
      background-color: #555;
}
    

以上代码中，样式规则分别设定 .nav 和 .sub-nav 的基本样式规则和鼠标悬停时的样式规则。其中，在 .nav 的规则中，排除了 ul 和 li 的默认样式，以及设定了 a 标签的基本样式，而 .sub-nav 的规则中，设定了二级菜单的默认样式为 display: none（即隐藏状态），并在父元素 li 的鼠标悬停时显现出来。

最后，通过 JS 代码或其他交互事件的定义，在用户点击菜单链接时显示或隐藏二级菜单。

此文介绍了 CSS 左侧二级导航菜单的基本 HTML 和 CSS 样式设定，读者可以在此基础上灵活添加自定义的交互效果和样式特性。

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