Question

我需要导航栏中的右上角菜单。但是在鼠标悬停时，子菜单会在窗口上方截断。

如何使其显示，以便子菜单的右边位于窗口边框旁边？

new Vue({
    el: '#app'
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</div>

Answer 1

您可以在css中更改菜单的位置属性。重置left值，然后添加right: 0

new Vue({
    el: '#app'
    });

.el-menu--horizontal .el-submenu > .el-menu {
  left: initial !important;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</div>

ElementUI：右子菜单显示截断（CSS）

1 个答案: