Element Plus el-menu-item 背景色自定义：修改默认颜色和鼠标悬停效果

可以使用 Element Plus 提供的 CSS 变量来修改 el-menu-item 标签下内容的背景色和鼠标悬浮在上的背景色。

1. 修改 el-menu-item 标签下内容的背景色：

可以使用 --color 属性来修改 el-menu-item 标签下内容的背景色，例如：

.el-menu-item {
  --color: #f0f0f0;
}

2. 修改鼠标悬浮在上的背景色：

可以使用 --hover-color 属性来修改鼠标悬浮在上的背景色，例如：

.el-menu-item {
  --hover-color: #e6e6e6;
}

完整代码如下：

<template>
  <el-menu default-active="1">
    <el-menu-item index="1">
      <template #title>
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <span>内容一</span>
    </el-menu-item>
    <el-menu-item index="2">
      <template #title>
        <i class="el-icon-menu"></i>
        <span>导航二</span>
      </template>
      <span>内容二</span>
    </el-menu-item>
  </el-menu>
</template>

<style>
.el-menu-item {
  --color: #f0f0f0; /* 修改 el-menu-item 标签下内容的背景色 */
  --hover-color: #e6e6e6; /* 修改鼠标悬浮在上的背景色 */
}
</style>