Want to set the background color for this drop-down

          <el-menu
          mode="horizontal"
          class="user-info"
          text-color="-sharp888888"
          active-text-color="-sharp888888"
          :router="true"
          default-active="1"
        >
          <el-submenu index="1" popper-class="menu" style="height:50px; float: right;">
            <template slot="title" style="line-height: 50px;height: 50px;">
              {{userRealname}}
            </template>
            <el-menu-item index="1-1"  route="/change_pwd">
              </el-menu-item>
            <el-menu-item index="1-2" @click="logout"></el-menu-item>
          </el-submenu>
        </el-menu>

want to set the background color for this drop-down. The official document provides a popper-class class, but the setting seems to be useless. I want to know how to change it

.
Jun.29,2021

try setting the global style, or add important


The drop-down box looks like this after it is actually rendered. You can see that the popper-class= "amenu" has been added to the outer div, so when you control the drop-down box, you only need to write .amenu li {}

.
<div class="el-menu--horizontal amenu" x-placement="bottom-start">
    <ul role="menu" class="el-menu el-menu--popup el-menu--popup-bottom-start">
        <li data-v-2a5103e1="" role="menuitem" tabindex="-1" class="el-menu-item">
           
        </li>
        <li data-v-2a5103e1="" role="menuitem" tabindex="-1" class="el-menu-item" >
            
        </li>
    </ul>
</div>

add attributes to the el-submenu tag: popper-class
such as image.png
:



popper-class
image.png
popper-class
image.png

Menu