把css部分的:hover 鼠标滑入事件改成点击事件.drop-down-menu + .menu-list-item:hover { color: #fff; /* 滑鼠滑入展開次選單*/ display: block; }

在CSS中，`:hover`伪类用于定义元素在鼠标悬停时的样式，但是你想要改为点击事件触发样式变化。在纯CSS中实现点击事件触发的效果并不是直接支持的，因为CSS不提供监听点击事件的能力。通常情况下，点击事件的监听和处理是通过JavaScript来完成的。

如果你想要在点击某个元素时改变另一个元素的样式，你需要使用JavaScript来添加点击事件监听器。下面是一个简单的JavaScript示例，展示了如何通过点击事件来改变元素的样式：

// 假设有一个按钮元素和一个菜单列表项元素，它们的类名分别为.drop-down-menu 和 .menu-list-item
document.querySelector('.drop-down-menu').addEventListener('click', function() {
    // 获取这个元素的下一个兄弟元素（假设是.drop-down-menu和.menu-list-item是相邻的）
    var menuListItem = this.nextElementSibling;
    if (menuListItem.style.display !== 'block') {
        // 如果当前菜单列表项是隐藏的，点击时就显示它
        menuListItem.style.display = 'block';
        menuListItem.style.color = '#fff'; // 改变文字颜色为白色
    } else {
        // 如果菜单列表项是显示的，点击时就隐藏它
        menuListItem.style.display = 'none';
    }
});

请注意，上述代码假设`.drop-down-menu`和`.menu-list-item`是相邻的元素，并且`.menu-list-item`是`.drop-down-menu`的下一个兄弟元素。实际的HTML结构可能不同，你可能需要根据实际的DOM结构来选择正确的元素。