CSS折叠菜单是Web设计中常见的一种交互方式。用户可以通过点击菜单项来展开或收起子菜单，这种菜单通常用在导航栏中。下面是一个简单的折叠菜单示例：

/* 初始状态，所有子菜单都隐藏 */.submenu {display: none;}/* 点击菜单项时，展开或收起子菜单 */.menu-item {cursor: pointer;}.menu-item:focus + .submenu {display: block;}

以上代码中，所有子菜单的"display"属性都被设置为"none"，即默认状态下不可见。每个菜单项都被指定为可点击的"cursor:pointer"，点击时可以触发:focus伪类，它表示该元素获得焦点。当菜单项获得焦点时，紧邻其后的下一个兄弟元素（即子菜单）被设置为"display:block"，从而被展开。

需要注意的是，如果用户点击菜单项时并未聚焦（即没有获得焦点），CSS折叠菜单将无法生效。因此，一般还会使用JavaScript代码来处理这种情况，实现更为稳定的交互效果。

// 使用jQuery实现CSS折叠菜单的点击事件处理$('.menu-item').on('click', function() {$(this).focus(); // 使菜单项获得焦点});

以上代码使用jQuery库绑定了".menu-item"元素的点击事件，并在处理函数中使该元素获得焦点。这样，即使用户没有通过键盘操作聚焦到菜单项，CSS折叠菜单仍然可以正常工作。