vue+ elementui侧边栏菜单

假如想要侧边栏一级导航颜色是蓝色，二级导航为红色，怎么改，求告知

为什么不在导航栏里面设置颜色呢，一级导航为一个颜色，二级导航为一个颜色，如果导航多写着麻烦，其实你只需要在写两个颜色的css样式，然后通过class="xx"放在一级导航或者二级导航栏即可，另外标签中就算有一样的class你可以在后面追加，class="xx 一级导航样式",class="xx 二级导航样式"，在不行你可以不用使用class属性，设置css的方法不是很多吗 id,class ,标签，style里等等，class你不用也可以使用标签css，例如
div{ font-size:80px},代表所有的div都添加了这个属性

我设置了整个head的颜色，然后整个导航栏放在里面，就继承了head的颜色，二级菜单也继承了颜色，改不掉

问题问的侧边导航栏，截图截的顶部导航栏，搞不懂。。。

是这样的不

我发现确实改不掉直接写死的，只有不设置初始菜单背景，然后自己在按照它对应层级，自己写个css给覆盖掉原来的

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>
  <style>
    .my-menu{
      background-color: #409eff;
    }
    .my-menu > .el-submenu > .el-submenu__title:hover {
    background-color: green;
    }
    .my-submenu-blue > .el-menu > .el-menu-item{
      background-color: blue;
    }
    .my-submenu-blue .el-menu .el-submenu__title{
      background-color: blue;
    }
    .my-submenu-red  > .el-menu > .el-menu-item{
      background-color: red;
    }
  </style>
<div id="app">
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo my-menu"
  mode="horizontal"
  @select="handleSelect"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2" popper-class="my-submenu-blue">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4" popper-class="my-submenu-red">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>