基础纯CSS下拉菜单（推荐）
这是最常用、最稳定的方法，将样式和行为完全分离，易于维护和修改，它主要包含三个部分：HTML结构、CSS样式 和 织梦标签。
（图片来源网络，侵删）
第1步：准备织梦标签（channelartlist）
在你的模板文件（通常是 head.htm 或你希望放置导航栏的文件）中，使用 channelartlist 标签来获取顶级栏目及其子栏目。
{dede:channelartlist typeid='top' row='8'}
<li>
<a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
<div class="subnav">
{dede:channel type='son' noself='yes'}
<a href="[field:typeurl/]">[field:typename/]</a>
{/dede:channel}
</div>
</li>
{/dede:channelartlist}
代码解释：
{dede:channelartlist typeid='top' row='8'}:typeid='top': 指定调用顶级栏目。row='8': 限制显示8个顶级栏目。
<li>: 每个顶级栏目都是一个列表项。<a href=...>: 顶级栏目的链接。{dede:channel type='son' noself='yes'}:type='son': 调用当前顶级栏目下的所有子栏目。noself='yes': 不显示顶级栏目自身（避免重复）。
<div class="subnav">: 这个div将包裹子菜单，我们通过CSS来控制它的显示和隐藏。
第2步：编写CSS样式
在模板的 <head> 部分或外部的CSS文件中，添加以下样式，这是实现下拉效果的关键。
/* 清除默认样式 */
ul, li { list-style: none; margin: 0; padding: 0; }
/* 导航栏主容器样式 (假设你的导航在一个nav里) */
.nav { display: flex; }
/* 顶级菜单项样式 */
.nav > li {
position: relative; /* 关键：为下拉菜单定位提供参考 */
float: left; /* 如果是老式布局，可能需要 */
margin-right: 10px;
}
/* 顶级菜单链接样式 */
.nav > li > a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
}
/* 鼠标悬停在顶级菜单上时的样式 */
.nav > li > a:hover {
background-color: #ddd;
}
/* 下拉菜单容器样式 */
.nav li .subnav {
/* 默认隐藏 */
display: none;
position: absolute; /* 关键：相对于父级li定位 */
top: 100%; /* 定位在父级li的下方 */
left: 0;
width: 160px; /* 设置下拉菜单的宽度 */
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000; /* 确保下拉菜单在内容之上 */
}
/* 鼠标悬停在顶级菜单项上时，显示下拉菜单 */
.nav > li:hover .subnav {
display: block;
}
/* 下拉菜单中的链接样式 */
.subnav a {
display: block; /* 让a标签撑满整个li */
padding: 10px 15px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #eee;
}
/* 鼠标悬停在子菜单链接上时的样式 */
.subnav a:hover {
background-color: #f0f0f0;
}
第3步：整合到HTML模板中
将织梦标签和CSS样式整合到你的HTML文件中。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的DedeCMS网站</title>
<style>
/* --- 在这里粘贴上面的CSS代码 --- */
ul, li { list-style: none; margin: 0; padding: 0; }
.nav { display: flex; }
.nav > li { position: relative; float: left; margin-right: 10px; }
.nav > li > a { display: block; padding: 10px 15px; text-decoration: none; color: #333; background-color: #f0f0f0; }
.nav > li > a:hover { background-color: #ddd; }
.nav li .subnav { display: none; position: absolute; top: 100%; left: 0; width: 160px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000; }
.nav > li:hover .subnav { display: block; }
.subnav a { display: block; padding: 10px 15px; text-decoration: none; color: #333; border-bottom: 1px solid #eee; }
.subnav a:hover { background-color: #f0f0f0; }
</style>
</head>
<body>
<nav>
<ul class="nav">
<!-- 在这里粘贴织梦的channelartlist标签代码 -->
{dede:channelartlist typeid='top' row='8'}
<li>
<a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
<div class="subnav">
{dede:channel type='son' noself='yes'}
<a href="[field:typeurl/]">[field:typename/]</a>
{/dede:channel}
</div>
</li>
{/dede:channelartlist}
<!-- 可以手动添加其他链接 -->
<li><a href="/">首页</a></li>
<li><a href="/about.html">关于我们</a></li>
</ul>
</nav>
<!-- 页面其他内容... -->
</body>
</html>
带jQuery动画效果的下拉菜单
如果你想让下拉菜单有平滑的滑入/滑出效果，可以使用 jQuery。
第1步：引入jQuery库
在 <head> 标签内引入 jQuery 库，你可以从官方CDN引入，也可以下载到本地。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
第2步：修改CSS
将 .subnav 的 display: none; 改为 visibility: hidden; 和 opacity: 0;，并添加过渡效果。
/* 修改和新增的CSS */
.nav li .subnav {
/* 默认隐藏 */
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 160px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
/* 添加过渡效果 */
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 鼠标悬停时显示，并设置不透明度为1 */
.nav > li:hover .subnav {
visibility: visible;
opacity: 1;
}
第3步：编写jQuery代码
在页面底部,</body> 标签前，添加以下jQuery代码。
（图片来源网络，侵删）
<script>
$(document).ready(function(){
// 方法一：直接使用CSS的:hover，这是最简单的，上面的CSS已经实现。
// 如果你需要更复杂的控制，可以使用下面的代码。
// 方法二：使用jQuery的hover事件（与CSS :hover效果类似）
/*
$('.nav > li').hover(
function() { // 鼠标进入
$(this).find('.subnav').stop(true, true).fadeIn(200); // fadeIn淡入
},
function() { // 鼠标离开
$(this).find('.subnav').stop(true, true).fadeOut(200); // fadeOut淡出
}
);
*/
});
</script>
二级下拉菜单（子菜单还有子菜单）
如果你的栏目结构更深,需要二级下拉菜单，只需在HTML结构和CSS上稍作修改即可。
修改的HTML结构
在子菜单的 li 中，如果它还有子栏目，就再嵌套一层 div。
{dede:channelartlist typeid='top' row='8'}
<li>
<a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
<div class="subnav">
{dede:channel type='son' noself='yes'}
<li>
<a href="[field:typeurl/]">[field:typename/]</a>
<!-- 假设这个栏目还有三级栏目，用channelartlist嵌套调用 -->
{dede:channelartlist typeid='[field:id/]'}
<div class="sub-subnav">
{dede:channel type='son' noself='yes'}
<a href="[field:typeurl/]">[field:typename/]</a>
{/dede:channel}
</div>
{/dede:channelartlist}
</li>
{/dede:channel}
</div>
</li>
{/dede:channelartlist}
修改的CSS样式
为二级下拉菜单 .sub-subnav 添加特定的样式。
/* ... (之前的CSS保持不变) ... */
/* 二级下拉菜单样式 */
.subnav li {
position: relative; /* 关键：为二级下拉菜单定位 */
}
.subnav .sub-subnav {
display: none;
position: absolute; /* 相对于其父级li定位 */
left: 100%; /* 定位在父级li的右侧 */
top: 0;
width: 150px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* 鼠标悬停在子菜单项上时，显示二级下拉菜单 */
.subnav li:hover .sub-subnav {
display: block;
}
/* ... (之后的CSS保持不变) ... */
总结与建议
- 推荐使用方法一：对于大多数DedeCMS 5.7网站，纯CSS的下拉菜单已经足够，性能好，代码简单，且对SEO友好。
- 保持代码整洁：将CSS代码放在
<style>标签内或单独的.css文件中，将JavaScript代码放在<script>标签内或单独的.js文件中，便于维护。 - 检查栏目：确保你的网站后台栏目结构设置正确，有“顶级栏目”和“子栏目”，否则
channelartlist和channel type='son'可能无法正确调用数据。 - 浏览器兼容性：现代浏览器对CSS
hover和position属性支持都很好，基本无需担心兼容性问题，如果需要支持非常老的浏览器（如IE8），可能需要添加一些hack或使用JavaScript作为补充。
希望这些详细的代码和解释能帮助你成功在DedeCMS 5.7中实现下拉菜单！
