`标签添加一些阴影效果，并为`.sub-dropdown-menu`添加透明度过渡动画。```css
.dropdown-menu {
position: relative;
display: inline-block;
.dropdown-item {
position: relative;
.sub-dropdown-menu {
display: none; /* 默认隐藏子菜单 */
position: absolute; /* 绝对定位 */
z-index: 999; /* 高层级z-index确保子菜单浮于上方 */
.sub-dropdown-menu.show {
display: block; /* 显示子菜单 */
opacity: 1; /* 清除透明度 */
```
### 三、触发事件
为了让用户能够通过点击来展开或收起下拉菜单，我们需要添加一些JavaScript代码来监听事件并控制`.show`类的添加和移除，这里我们使用原生JavaScript来实现这个功能。
```javascript
const dropdownItems = document.querySelectorAll('.dropdown-item');
const subDropdownMenus = document.querySelectorAll('.sub-dropdown-menu');
dropdownItems.forEach(item => {
item.addEventListener('mouseenter', () => {
showSubMenu(item);
});
item.addEventListener('mouseleave', () => {
hideSubMenu();
});
});
function showSubMenu(parentItem) {
parentItem.querySelector('.sub-dropdown-menu').classList.add('show');
function hideSubMenu() {
const activeItem = document.querySelector('.dropdown-item.active');
if (activeItem) {
activeItem.querySelector('.sub-dropdown-menu').classList.remove('show');
}
```
### 四、优化实践
为了提升下拉菜单的性能和用户体验，我们应该尽量减少DOM操作，避免不必要的重绘和回流，这可以通过将子菜单的显示逻辑转移到CSS上来实现，例如使用`:hover`伪类来代替JavaScript事件监听。
```css
.dropdown-item:hover > .sub-dropdown-menu {
display: block; /* 使用:hover替代JavaScript事件 */
opacity: 1;
.dropdown-item:hover > .sub-dropdown-menu.show {
opacity: 1; /* 如果已经显示，不需要再次显示 */
```
### 五、响应式设计
为了使下拉菜单能够在不同设备上正常工作，我们需要考虑移动设备上的视口单位(`vw`和`vh`)以及媒体查询，这样可以根据屏幕大小调整下拉菜单的尺寸和行为。
```css
@media (max-width: 768px) {
.dropdown-menu {
/* 移动端特定样式 */
}
```
### 六、实例演示
下面是一个完整的下拉菜单示例，包括HTML、CSS和JavaScript代码。
```html
```
通过以上步骤，我们就能够利用CSS创建出既美观又实用的下拉菜单了，实践是最好的学习方式，不妨动手尝试自己搭建一个下拉菜单，相信你会收获满满。
评论