html - el-menu 元素 UI 的中心 el-submenu

Question

我在 Vue 的 Element UI 中设置了一个菜单。

子菜单下拉菜单有一些奇怪的配置，用于控制菜单下拉菜单的位置。原生地，引导设置使菜单下拉，其左侧与子菜单标题的左侧对齐。

但是，我希望这个子菜单出现在标题的中心，而不是左对齐。

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

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

但是，如果我这样做，下拉菜单会完全显示在标题的左侧，如下所示：

我想知道 Element 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>

分配给“弹出”菜单的 CSS 为：

.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;
}

标签： htmlcssvue.jselement-ui