Element UI水平菜单展开方式修改：从悬停到点击

Element UI的el-menu组件在水平模式（mode="horizontal"）下，默认使用鼠标悬停（hover）展开子菜单。 许多开发者更倾向于点击（click）展开，以优化用户体验或匹配特定设计风格。本文提供两种解决方案。

问题描述：上图展示了默认的悬停展开行为，子菜单会在鼠标移至父菜单项时自动出现，离开后消失。 我们希望改为点击展开，或至少让子菜单在鼠标离开父菜单项后保持可见。

方案一：使用menu-trigger属性

Element UI 提供了 menu-trigger 属性来控制子菜单的展开方式，它接受 hover 和 click 两个值，默认值为 hover。 要将展开方式改为点击，只需将该属性设置为 click：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<el-menu :default-active="activeIndex" :menu-trigger="click" class="el-menu-demo" mode="horizontal">
  <!-- 菜单项 -->
</el-menu>

这将使所有子菜单都通过点击展开。

方案二：使用CSS覆盖默认样式

如果需要保留悬停效果（鼠标移入时高亮显示），但又不想让子菜单在鼠标离开后立即消失，则需要通过CSS覆盖Element UI的默认样式。 通过CSS选择器，精确定位需要修改的元素并调整其属性。 例如，可以修改子菜单的 display 属性使其始终可见，或修改 transition 属性调整动画效果。 具体的CSS代码需要根据实际样式进行调整。 以下是一个示例（需根据实际类名调整）：

.el-menu--horizontal > .el-menu-item:hover > .el-submenu__title {
  /* 调整样式，防止子菜单消失 */
}

通过以上两种方法，可以灵活控制Element UI el-menu 组件在水平模式下的子菜单展开方式，满足不同的设计需求。 需要注意的是，CSS覆盖方法需要根据具体的Element UI版本和自定义样式进行调整。