Html el菜单元素UI的中心el子菜单

我在Vue的元素UI中设置了一个菜单

子菜单下拉菜单有一些奇怪的配置，它如何控制菜单下拉的位置。本机，引导设置使菜单下拉，其左侧与子菜单标题的左侧对齐

但是，我希望此子菜单显示在标题的中心，而不是左对齐

我在网上发现，典型的解决方案是在CSS中执行以下操作：

.dropdown-menu-center {
 left: 50% !important;
 right: auto !important;
 text-align: center !important;
 transform: translate(-50%, 0) !important;
}

然而，如果我这样做，下拉列表就会完全消失，并出现在标题的左侧，如下所示：

我想知道元素UI在这里是如何工作的，我如何重置属性以像基本CSS一样工作？我不知道该怎么做

一般代码如下所示：

<template>
<el-menu
    class="default-menu"
    v-bind="$attrs"
    text-color="#333"
    active-text-color="#333"
    :default-active="defaultActiveIndex"
    @select="handleSelect"
    menu-trigger="hover"
>
    <el-submenu class="navigation-item" index="xxx" :popper-append-to-body="true">
        <template slot="title">Title</template>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <div class="dropdown-menu-divider" />
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
    </el-submenu>
    <el-submenu class="navigation-item" index="xxx" :popper-append-to-body="true">
        <template  slot="title">Title2</template>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">
                Submenu item
            </a>
        </el-menu-item>
    </el-submenu>
    </el-menu>
   </template>

.el-menu--horizontal ul.el-menu.el-menu--popup.el-menu--popup-bottom-start {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
    text-align: left;
    display: block !important;
    position: absolute !important;
}