element-ui修改el-menu样式记录：设置菜单背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式

在Element UI中，可以通过CSS覆盖默认样式来实现自定义el-menu的样式。以下是设置背景图片、图标和高亮样式的示例代码：

/* 设置背景图片 */
.el-menu {
  background-image: url('path/to/your/background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
 
/* 设置图标样式 */
.el-menu .el-menu-item i {
  color: #ffffff; /* 图标颜色 */
  margin-right: 10px; /* 图标右边距 */
}
 
/* 设置菜单高亮样式 */
.el-menu--horizontal .el-menu-item.is-active {
  border-bottom: 2px solid #ffffff; /* 高亮下划线 */
}
 
/* 鼠标悬浮样式 */
.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 鼠标悬浮背景色 */
  color: #ffffff; /* 鼠标悬浮文字颜色 */
}

将上述CSS添加到你的样式表中，并确保它在Element UI的样式之后加载，这样可以覆盖默认的样式。如果你使用的是Vue单文件组件（.vue），可以在<style>标签中添加上述CSS。如果是全局样式文件，请确保使用合适的选择器来指定你想要修改样式的el-menu实例。