好的！下面给你一个三级页面结构的多级菜单导航示例代码，用HTML + CSS + JavaScript实现，模拟一级、二级、三级页面的导航菜单效果，清晰展现层级关系。

三级页面多级导航菜单示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>三级菜单导航示例</title>
<style>
  /* 基本样式 */
  body {
    font-family: Arial, sans-serif;
  }
  nav {
    width: 300px;
  }
  ul.menu, ul.submenu {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  ul.menu > li {
    background: #3498db;
    margin-bottom: 2px;
    position: relative;
  }
  ul.menu > li > a {
    color: white;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
  }
  ul.menu > li > a:hover {
    background: #2980b9;
  }

  /* 二级菜单 */
  ul.submenu {
    display: none; /* 默认隐藏 */
    background: #ecf0f1;
  }
  ul.submenu > li > a {
    color: #333;
    padding: 8px 25px;
    display: block;
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
  }
  ul.submenu > li > a:hover {
    background: #bdc3c7;
    border-left: 3px solid #3498db;
  }

  /* 三级菜单 */
  ul.submenu ul.submenu {
    padding-left: 15px;
    background: #f9f9f9;
  }
  ul.submenu ul.submenu > li > a {
    padding-left: 40px;
  }
</style>
</head>
<body>

<nav>
  <ul class="menu">
    <li>
      <a href="#">国内新闻（一级）</a>
      <ul class="submenu">
        <li>
          <a href="#">北京新闻（二级）</a>
          <ul class="submenu">
            <li><a href="#">北京疫情最新通报（三级）</a></li>
            <li><a href="#">北京交通管制通知（三级）</a></li>
          </ul>
        </li>
        <li>
          <a href="#">上海新闻（二级）</a>
          <ul class="submenu">
            <li><a href="#">上海经济发展报告（三级）</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">国际新闻（一级）</a>
      <ul class="submenu">
        <li>
          <a href="#">美洲新闻（二级）</a>
          <ul class="submenu">
            <li><a href="#">美国大选报道（三级）</a></li>
          </ul>
        </li>
        <li>
          <a href="#">欧洲新闻（二级）</a>
          <ul class="submenu">
            <li><a href="#">欧盟峰会要点（三级）</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  // 简单JS实现点击展开/收起子菜单
  document.querySelectorAll('nav ul.menu > li > a').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      // 展开一级菜单对应的二级菜单
      const submenu = item.nextElementSibling;
      if (submenu) {
        submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
      }
    });
  });

  document.querySelectorAll('nav ul.submenu > li > a').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      // 展开二级菜单对应的三级菜单
      const submenu = item.nextElementSibling;
      if (submenu) {
        submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
      }
    });
  });
</script>

</body>
</html>

说明：

  • 一级菜单（国内新闻、国际新闻）是主导航，点击展开对应二级菜单。
  • 二级菜单（北京新闻、上海新闻、美洲新闻等）点击展开三级菜单。
  • 三级菜单是最终内容页链接。
  • 纯前端实现，点击切换显示，简单易懂。
  • 可扩展为点击跳转实际页面的超链接。

明白！我给你写一个基于 Vue 3 的三级菜单导航组件示例，代码简洁且可复用，适合现代前端项目。

Vue 3 三级菜单导航组件示例

<template>
  <nav>
    <ul class="menu">
      <li v-for="(item, index) in menuData" :key="index">
        <a href="#" @click.prevent="toggle(index)">
          {{ item.name }}
          <span v-if="item.children?.length">▾</span>
        </a>
        <ul v-if="item.children?.length" v-show="activeIndex === index" class="submenu">
          <li v-for="(sub, subIndex) in item.children" :key="subIndex">
            <a href="#" @click.prevent="toggleSub(index, subIndex)">
              {{ sub.name }}
              <span v-if="sub.children?.length">▸</span>
            </a>
            <ul v-if="sub.children?.length" v-show="activeSubIndex[index] === subIndex" class="submenu level3">
              <li v-for="(third, thirdIndex) in sub.children" :key="thirdIndex">
                <a :href="third.url">{{ third.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { ref } from 'vue';

const menuData = ref([
  {
    name: '国内新闻',
    children: [
      {
        name: '北京新闻',
        children: [
          { name: '北京疫情最新通报', url: '/beijing/epidemic' },
          { name: '北京交通管制通知', url: '/beijing/traffic' },
        ],
      },
      {
        name: '上海新闻',
        children: [
          { name: '上海经济发展报告', url: '/shanghai/economy' },
        ],
      },
    ],
  },
  {
    name: '国际新闻',
    children: [
      {
        name: '美洲新闻',
        children: [
          { name: '美国大选报道', url: '/america/election' },
        ],
      },
      {
        name: '欧洲新闻',
        children: [
          { name: '欧盟峰会要点', url: '/europe/summit' },
        ],
      },
    ],
  },
]);

const activeIndex = ref(null);
const activeSubIndex = ref({});

function toggle(index) {
  activeIndex.value = activeIndex.value === index ? null : index;
  // 关闭所有二级菜单展开状态
  activeSubIndex.value = {};
}

function toggleSub(parentIndex, subIndex) {
  if (!activeSubIndex.value) activeSubIndex.value = {};
  activeSubIndex.value[parentIndex] = activeSubIndex.value[parentIndex] === subIndex ? null : subIndex;
}
</script>

<style scoped>
nav {
  width: 300px;
  font-family: Arial, sans-serif;
}

ul.menu,
ul.submenu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul.menu > li > a,
ul.submenu > li > a {
  display: block;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

ul.menu > li > a:hover,
ul.submenu > li > a:hover {
  background: #2980b9;
}

ul.submenu {
  background: #ecf0f1;
}

ul.submenu.level3 {
  background: #f9f9f9;
}

ul.submenu > li > a {
  color: #333;
  padding-left: 25px;
}

ul.submenu.level3 > li > a {
  padding-left: 40px;
  color: #555;
}

span {
  float: right;
}
</style>

使用说明

  • 一级菜单点击展开/收起对应的二级菜单。
  • 二级菜单点击展开/收起对应的三级菜单。
  • 三级菜单为具体内容链接，可替换 url 为实际路径。
  • 组件纯净且响应式，易于集成。