这里我将为您提供两种最主流、最实用的方法：
（图片来源网络，侵删）
- 使用 DedeCMS 自带的“栏目导航”标签（推荐，最简单）
- 手动编写 HTML + CSS + 标签（最灵活，可定制性最高）
准备工作：确保你的栏目结构正确
无论使用哪种方法,一个清晰的栏目结构是成功的一半，在 DedeCMS 后台，你的栏目应该是这样的层级关系：
首页
├── 关于我们 (一级栏目)
│ ├── 公司简介 (二级栏目)
│ ├── 发展历程 (二级栏目)
│ └── 企业文化 (二级栏目)
├── 产品中心 (一级栏目)
│ ├── 产品分类 A (二级栏目)
│ ├── 产品分类 B (二级栏目)
│ └── 产品分类 C (二级栏目)
└── 新闻资讯 (一级栏目)
├── 公司新闻 (二级栏目)
└── 行业动态 (二级栏目)关键点：
- 一级栏目：在后台添加栏目时，选择“顶级栏目”。
- 二级栏目：在后台添加栏目时，选择“栏目”，然后在“选择上级栏目”的下拉菜单中，选择它对应的一级栏目。
使用 DedeCMS 自带的“栏目导航”标签（推荐）
这种方法最简单,几乎不需要写任何复杂的代码，适合大多数标准网站。
第 1 步：在模板文件中调用一级栏目
找到你网站头部模板文件 head.htm 或者你想要放置导航的模板文件（index.htm），在合适的位置，使用 {dede:channel} 标签来调用一级栏目。
（图片来源网络，侵删）
<!-- 在 head.htm 或 index.htm 中 -->
<div class="nav">
<ul>
<!--
type='top' 表示调用顶级栏目（一级栏目）
row='10' 表示调用 10 个栏目，可根据需要修改
currentstyle='<li class="on"><a href="~typelink~">~typename~</a></li>' 是当前栏目高亮的样式
-->
{dede:channel type='top' row='10' currentstyle="<li class='on'><a href='~typelink~'>~typename~</a></li>"}
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
<!-- 如果需要添加“首页”链接，可以手动加上 -->
<li><a href="{dede:global.cfg_basehost/}">首页</a></li>
</ul>
</div>
第 2 步：为一级栏目添加下拉菜单（二级栏目）
我们需要让一级栏目在鼠标悬停时,显示它的子栏目（二级栏目），这需要一点 CSS 和对 {dede:channel} 标签的巧妙运用。
HTML 结构修改：
我们需要修改上面的 HTML，为每个一级栏目 <li> 添加一个包含二级栏目的子列表 <ul>。
<div class="nav">
<ul>
{dede:channel type='top' row='10'}
<li>
<a href="[field:typelink/]">[field:typename/]</a>
<!-- 关键部分：检查并调用子栏目 -->
[field:sonlist]
<ul class="subnav">
{dede:channel type='son' noself='yes'}
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
[/field:sonlist]
</li>
{/dede:channel}
<li><a href="{dede:global.cfg_basehost/}">首页</a></li>
</ul>
</div>
代码解释：
（图片来源网络，侵删）
[field:sonlist]...[/field:sonlist]：这是一个特殊的字段，当且仅当当前栏目有子栏目时，才会执行其中的内容。{dede:channel type='son' noself='yes'}：在这个循环内部，我们再次使用channel标签。type='son'：表示只调用当前栏目的子栏目（也就是我们的二级栏目）。noself='yes'：表示不调用栏目本身，只调用它的子栏目。
CSS 样式实现：
为了让二级菜单在鼠标悬停时显示,我们需要添加 CSS 样式，将以下 CSS 代码放入你的模板样式文件中（通常是 /templets/你的模板名/style/css.css）。
/* 导航容器 */
.nav { width: 100%; background-color: #333; }
.nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav ul li {
display: inline-block; /* 让列表项水平排列 */
position: relative; /* 这是关键，为下拉菜单定位提供参考 */
}
.nav ul li a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
/* 鼠标悬停在一级栏目上时的样式 */
.nav ul li:hover a { background-color: #555; }
/* 二级菜单的容器（默认隐藏） */
.nav ul li .subnav {
position: absolute; /* 绝对定位，相对于父级 li */
top: 100%; /* 父级 li 的底部 */
left: 0;
background-color: #444;
min-width: 160px; /* 设置一个最小宽度 */
list-style: none;
margin: 0;
padding: 0;
display: none; /* 默认隐藏 */
z-index: 1000; /* 确保它在内容之上 */
}
/* 鼠标悬停在一级栏目 li 上时，显示二级菜单 */
.nav ul li:hover .subnav {
display: block; /* 鼠标悬停时显示 */
}
/* 二级菜单列表项的样式 */
.nav ul li .subnav li {
display: block; /* 恢复为块级元素，垂直排列 */
width: 100%;
}
.nav ul li .subnav li a {
padding: 10px 15px;
white-space: nowrap; /* 防止文字换行 */
}
/* 鼠标悬停在二级菜单项上时的样式 */
.nav ul li .subnav li:hover a {
background-color: #555;
}
优点：
- 简单快捷：无需复杂编程，后台维护栏目即可。
- 自动更新：后台增删改栏目，导航会自动更新。
- SEO 友好：直接调用系统栏目，有利于搜索引擎抓取。
缺点：
- 样式固定：受限于模板标签，自定义样式不如手写灵活。
手动编写 HTML + CSS + 标签（最灵活）
如果你对网站的视觉效果有极高的要求,或者需要实现非常规的交互效果，这种方法是最佳选择。
第 1 步：编写静态 HTML 结构
先不考虑 DedeCMS 的标签，先用纯 HTML 写出你想要的导航菜单结构。
<nav class="main-nav">
<ul>
<li class="nav-item">
<a href="#">关于我们</a>
<div class="dropdown">
<a href="#">公司简介</a>
<a href="#">发展历程</a>
<a href="#">企业文化</a>
</div>
</li>
<li class="nav-item">
<a href="#">产品中心</a>
<div class="dropdown">
<a href="#">产品分类 A</a>
<a href="#">产品分类 B</a>
<a href="#">产品分类 C</a>
</div>
</li>
<li class="nav-item"><a href="#">首页</a></li>
<!-- 更多一级栏目... -->
</ul>
</nav>
第 2 步：用 DedeCMS 标签替换静态内容
我们需要用 DedeCMS 的 {dede:channel} 标签来动态生成上面的 HTML 结构。
<nav class="main-nav">
<ul>
{dede:channel type='top' row='10'}
<li class="nav-item">
<a href="[field:typelink/]">[field:typename/]</a>
<!-- 用 div 代替 ul，方便自定义样式 -->
[field:sonlist]
<div class="dropdown">
{dede:channel type='son' noself='yes'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
</div>
[/field:sonlist]
</li>
{/dede:channel}
<li class="nav-item"><a href="{dede:global.cfg_basehost/}">首页</a></li>
</ul>
</nav>
第 3 步：编写 CSS 样式
这部分和方法的 CSS 非常相似，只是类名可能不同，你需要根据你写的 HTML 结构来调整。
/* 主导航 */
.main-nav { background: #f0f0f0; }
.main-nav ul { list-style: none; text-align: center; }
.main-nav ul li { display: inline-block; position: relative; }
.main-nav ul li a { display: block; padding: 20px; text-decoration: none; color: #333; }
/* 下拉菜单容器 */
.main-nav ul li .dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
display: none; /* 默认隐藏 */
min-width: 180px;
}
/* 鼠标悬停时显示下拉菜单 */
.main-nav ul li:hover .dropdown {
display: block;
}
/* 下拉菜单链接样式 */
.main-nav ul li .dropdown a {
display: block;
padding: 12px 20px;
color: #555;
border-bottom: 1px solid #eee;
}
.main-nav ul li .dropdown a:last-child { border-bottom: none; }
.main-nav ul li .dropdown a:hover { background: #f9f9f9; color: #0066cc; }
优点：
- 完全可控：HTML 结构、CSS 样式、JavaScript 交互都可以完全自定义。
- 性能可能更好：可以避免 DedeCMS 标签可能带来的额外开销。
- 兼容性强：可以实现任何复杂的菜单效果。
缺点：
- 维护成本高：如果后台栏目有变动，需要手动修改模板文件来匹配，容易出错。
- 需要更多前端知识：要求你对 HTML、CSS 有较好的掌握。
总结与建议
| 特性 | 方法一 (自带标签) | 方法二 (手动编写) |
|---|---|---|
| 实现难度 | 简单 | 中等 |
| 灵活性 | 较低 | 极高 |
| 维护性 | 好，后台自动更新 | 差，需手动维护模板 |
| 适用场景 | 绝大多数标准网站，追求快速上线和便捷维护。 | 对 UI/UX 要求极高的定制化项目，或有特殊交互需求。 |
给你的建议：
- 如果你是新手，或者项目需求不复杂，请毫不犹豫地选择方法一，它足够强大且易于使用。
- 如果你是前端开发者，或者客户对导航菜单的视觉效果有非常具体的要求，那么选择方法二会让你获得最大的设计自由度。
希望这个详细的教程能帮助你成功实现 DedeCMS 的二级导航菜单！如果在操作中遇到问题，可以随时提问。
