在dedecms中，要实现纯CSS的一级栏目下拉导航菜单，首先需要对模板进行一些修改，假设我们使用的是默认的模板。
### 一、修改模板文件
1. **找到并打开模板文件
通常在`templets/default/`目录下，找到`header.htm`或相应的头部模板文件。
2. **添加导航结构
```html
```
### 二、添加CSS样式
1. **基本样式
```css
.mainmenu {
liststyle: none;
margin: 0;
padding: 0;
display: flex;
justifycontent: spacearound;
}
.mainmenu > li {
position: relative;
}
.mainmenu a {
display: block;
padding: 10px 15px;
textdecoration: none;
color: #333;
}
```
2. **下拉菜单样式
```css
.dropdown .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
backgroundcolor: #fff;
boxshadow: 0 8px 16px rgba(0,0,0,0.2);
zindex: 1000;
}
.dropdown:hover .submenu {
display: block;
}
.submenu li {
width: 200px; /* 根据实际需求调整 */
}
.submenu a {
padding: 10px;
}
```
### 三、JavaScript（可选）
如果需要更复杂的交互效果，可以添加一些JavaScript代码，点击父级菜单显示子菜单等。
```html
```
### 四、测试与调整
完成上述步骤后，保存文件并在浏览器中刷新页面，检查导航菜单是否正常工作，根据实际效果进行必要的调整。
### 五、优化与扩展
1. **响应式设计**：确保导航菜单在不同设备和屏幕尺寸下都能正常显示，可以使用媒体查询来调整样式。
2. **动画效果**：为下拉菜单添加平滑过渡或滑动效果，提升用户体验。
3. **SEO优化**：确保导航链接的结构合理，便于搜索引擎抓取。
4. **可访问性**：为导航菜单添加适当的ARIA标签，提高网站的可访问性。
### 六、常见问题解答（FAQs）
#### 问题1：如何更改下拉菜单的宽度？
答：可以通过修改CSS中的`.submenu li`样式来调整下拉菜单的宽度，将`width: 200px;`改为所需的像素值。
#### 问题2：如何使下拉菜单在鼠标移开时自动隐藏？
答：可以通过JavaScript来实现这一功能，在上述JavaScript代码中，移除`event.stopPropagation();`行，并添加以下代码：
```javascript
document.addEventListener('click', function(event) {
if (!event.target.closest('.mainmenu')) {
var openSubMenu = document.querySelector('.mainmenu .submenu:visible');
if (openSubMenu) {
openSubMenu.style.display = 'none';
}
}
});
```
这段代码会在用户点击页面其他部分时关闭所有打开的下拉菜单。