「仿站教程」纯css三级联动显示

来源: 海外服务器
导读 如何创建一个引人注目的三级嵌套下拉菜单,通过HTML和CSS的结合实现。HTML结构分为A和B两个级别,每个级别都包含嵌套的无序列表,构成三级下拉。CSS样式为菜单提供了吸引人的外观和直观的交互性,鼠标悬停时显示下一级列表。文章通过详细的步骤,从HTML结构到CSS样式,展示了如何创建这一菜单。通过阅读,你将了解创建三级下拉菜单的实际步骤,并能够应用这些知识来改善网站导航的用户体验。如果你对网页设计、CSS样式和用户交互感兴趣,不妨深入了解并尝试应用这一实用的教程。



第一步:HTML 结构

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 导航菜单容器 -->
  <div id="MyNav">
    <!-- A 级别 -->
    <div>
      A
      <!-- A 级别的第一层列表 -->
      <ul>
        <!-- A 级别的第二层列表项 -->
        <li>
          A1
          <!-- A1 级别的第三层列表 -->
          <ol>
            <li>aaaaaaa1</li>
            <li>aaaaaaa2</li>
            <li>aaaaaaa3</li>
            <li>aaaaaaa4</li>
          </ol>
        </li>
        <!-- A 级别的其他第二层列表项 -->
        <li>
          A2
          <ol>
            <li>aaaaaaa2</li>
          </ol>
        </li>
        <!-- ... 重复类似的结构,处理 A3、A4、A5 ... -->
      </ul>
    </div>

    <!-- B 级别 -->
    <div>
      B
      <!-- B 级别的第一层列表 -->
      <ul>
        <!-- B 级别的第二层列表项 -->
        <li>
          B1
          <!-- B1 级别的第三层列表 -->
          <ol>
            <li>aaaaaaa6</li>
          </ol>
        </li>
        <!-- ... 重复类似的结构,处理 B2、B3、B4、B5 ... -->
      </ul>
    </div>
  </div>
</body>

在这一步,我们创建了一个基本的 HTML 结构。导航菜单被组织成 A 和 B 两个级别,每个级别包含了嵌套的无序列表(<ul>)和列表项(<li>),表示三级下拉菜单。

第二步:CSS 样式

<style>
  /* 使用 flex 布局使菜单项在一行内排列 */
  #MyNav {
    display: flex;
    flex-wrap: wrap;
  }

  /* 每个级别容器的样式 */
  #MyNav div {
    margin-right: 3rem;
    width: 300px;
  }

  /* 第二层列表(ul)的初始样式 */
  #MyNav div ul {
    display: none; /* 初始时隐藏 */
    background-color: #0004ff; /* 第二层列表的背景色 */
  }

  /* 当鼠标悬停在父容器时显示第二层列表 */
  #MyNav div:hover ul {
    display: block;
  }

  /* 第三层列表(ol)的初始样式 */
  #MyNav div ol {
    display: none; /* 初始时隐藏 */
    background-color: #00ffb7; /* 第三层列表的背景色 */
  }

  /* 当鼠标悬停在第二层列表项上时显示第三层列表 */
  #MyNav div ul li:hover ol {
    display: block;
  }
</style>

在这一步,我们添加了 CSS 样式来创建三级嵌套下拉菜单的外观和行为:

  • #MyNav:菜单容器使用 flex 布局,以在一行内排列其子 <div> 元素。

  • #MyNav div:每个级别容器有指定的宽度和右边距,用于间距。

  • #MyNav div ul:第二层列表初始时是隐藏的(display: none),并且有一个背景色。

  • #MyNav div:hover ul:当鼠标悬停在 <div> 上时,其子 ul 将显示(display: block)。

  • #MyNav div ol:第三层列表初始时也是隐藏的,并且有另一种背景色。

  • #MyNav div ul li:hover ol:当鼠标悬停在 ul 的子 li 上时,其子 ol 将显示。

结论:

通过这些 HTML 和 CSS 片段,您创建了一个三级嵌套下拉菜单。该菜单以嵌套列表的形式组织,CSS 提供了样式和交互性,根据鼠标悬停动作显示和隐藏下拉级别。根据您的具体需求自定义内容和样式。